事件

事件：分为两部分

1、行为本身：浏览器天生就赋予其的行为：onmouseover（onmouserenter）、onmouseout（onmouseleave）、onmousemove、onmousedown、onmouseup、onmousewheel（鼠标滚轮滚动行为）、onscroll（滚动条滚动行为）、onresize（window.onresize浏览器窗口的大小改变事件）、onload、onunload、onfocus（文本框获取焦点行为）、onblur（文本框失去焦点）、onkeydown、onkeyup（键盘的按下和抬起行为）...
哪怕没有给上述的行为绑定方法，事件也是存在的，当我们点击的时候，同样会触发它的onclick行为，只是什么事情都没做而已

2、事件绑定：给元素的某一个行为绑定方法

var oDiv=document.getElementById("div1");
//-->方法1：onclick这个行为定义在当前元素的私有属性上

oDiv.onclick=function(){
    //-->当我们触发oDiv的click行为的时候，会把绑定的这个函数执行
};

//-->方法2：addEventListener这个属性是定义在当前元素所属EventTarget这个类的原型上的
//addEventListener--->第一个参数是行为的类型，第二个参数是给当前的行为绑定的方法，第三个参数是控制在哪个阶段发生：true（在捕获阶段发生）  false（在冒泡阶段发生）
oDiv.addEventListener("click",function(){
      console.log("ok");
},false);

方法2这种称为：DOM 2级事件绑定

onclick这种绑定方式称为：DOM 0级事件绑定
把匿名函数定义的部分当做一个值赋值给oDiv的点击行为（函数表达式），当触发#div1的点击行为的时候，会执行对应绑定上的方法
重要：不仅仅把绑定的方法执行了，而且浏览器还默认给这个方法传递了一个参数值MouseEvent：鼠标事件对象
（1）它是一个对象数据类型值，里面包含了很多的属性和属性值，这些都是用来记录当前鼠标的相关信息的
（2）MouseEvent-->UIEvent-->Event-->Object
（3）MouseEvent记录的是页面中唯一一个鼠标每一次触发时候的相关信息，和到底是在哪个元素上触发的没有关系

关于事件对象MouseEvent的兼容处理
（1）事件对象本身的获取存在兼容问题：标准浏览器中是浏览器给方法传递的参数，我们只需定义形参e就可以获取到；在IE6-8中浏览器不会给方法传递参数，我们如果需要的话，需要到window.event中获取查找----->e=e||window.event;

oDiv.onclick=function(){
      e=e||window.event;
      //--->e.type:存储的是当前鼠标触发的行为类型  "click"

      //--->e.clientX/e.clientY:当前鼠标触发点距离当前屏幕左上角的x/y轴的坐标值

      //---->e.target:事件源，当前鼠标触发的是哪个元素，那么它存储的就是哪个元素，但是在IE6-8中不存在这个属性（e.target的值是undefined），我们使用e.srcElement来获取事件源
      e.target=e.target||e.srcElement;

      //--->e.pageX/e.pageY:当前鼠标触发点距离body左上角（页面第一屏幕最左上端）的x/y轴的坐标值，但是在IE6-8中没有这个属性。我们通过使用clientY+滚动条卷去的高度获取也可以
      e.pageX=e.pageX||(e.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft));
      e.pageY=e.pageY||(e.clientY+(document.documentElement.scrollTop||document.body.scrollTop));

      //--->e.preventDefault:阻止浏览器的默认行为(如有时使用a标签，但点击时并不想实现跳转)，在IE6-8中没有这个方法，我们需要使用e.returnValue
      e.preventDefault?e.preventDefault():e.returnValue=false;//或者用return false也可以阻止默认行为；

      //e.stopPropagation:阻止事件的冒泡传播，在IE6-8中不兼容，使用e.cancelBubble=true来代替
      e.stopPropagation?e.stopPropagation():e.cancelBubble=true;

      //e.keyCode:当前键盘上每一个键对应的值：空格键（space）-->32；回退键（Backspace）--->8；回车键（Enter）--->13；删除键（Delete）--->46；四个方向键（左37 上38 右39 下40）
};

事件的传播机制：

a、捕获阶段：从外向里依次查找元素
b、目标阶段：当前事件源本身的操作
c、冒泡阶段：从内到外依次触发相关的行为（最常用的阶段）

使用DOM 0级事件绑定给元素的某一个行为绑定的方法，都是在行为触发后的冒泡阶段把方法执行的

image.png

onmouseover/onmouseout与onmouseenter/onmouseleave区别：
都是鼠标滑上去的行为，但是onmouseenter浏览器默认阻止了它的冒泡传播（这一级的onmouseenter行为触发，不会传播到它的上一级）；
而onmouseover是存在冒泡传播的，想要阻止的话只能自己写代码阻止

事件委托(shijiandaili)：

利用事件的冒泡传播机制（触发当前元素的某个行为，它父级所有元素的相关行为都会被触发），如果一个容器中有很多元素都要绑定点击事件，我们没有必要一个个的绑定了，只需要给最外层的容器绑定一个点击事件即可，在这个方法执行的时候，通过事件源的区分来进行不同的操作

document.body.onclick=function(e){
      e=e||window.event;
      e.target=e.target||e.srcElement;
      console.log(e.target.id);
}