1、什么事事件？
事件分为两部分：1->行为本身：浏览器天生就赋予其的行为 onclick、onmouseover、onmouseenter、onmouseout、onmouseleave、onmousemove、onmousedown、onmouseup、onmousewheel(鼠标滚动事件)、onscroll(滚动条滚动行为)、onesize(window.onresize；浏览器窗口的大小改变事件)、onload、onunload（浏览器关闭事件）、onfocus(文本框获取焦点事件)、onblur(文本框失去焦点事件)、onkeydown、onkeyup(浏览器按下和抬起行为)......
哪怕没有给上述的行为绑定方式，事件也是存在的，当我们点击的时候，同样会触发它的onclick行为，只是什么都没有做而已，但是这个事件是存在的
2->事件绑定：给元素的某一个行为绑定方法：
//DOM0级事件绑定
Ele.onclick = function(){} // onclick这个行为定义在当前元素的私有属性上
//DOM2级 事件绑定
Ele.addEventListener = function(){} //addEventListener这个属性是定义在当前元素EventTarget这个类得原型上
重要：不仅仅把绑定的方法执行，而且浏览器还默默地给这个方法传递了一个参数值->mouseEvent(鼠标事件对象)，1：它是一个对象数据类型的值，里面包含了很多的属性名和属性值，这些都是用来记录当前鼠标的相关信息的，2：mouseEvent->UIEvent->Event->Object 原型，3：MouseEvent记录的是页面中唯一一个鼠标每次触发时候的相关信息，和到底在那个元素上出发的没有关系
2、关于事件对象MouseEvent的兼容问题
1：事件对象本身的获取存在兼容问题：标准浏览器是浏览器给方法传递的参数，我们只需要定义形参e就可以获取到；但是在IE6~8中，浏览器不会传递参数，如果需要的话，需要到window.event中查找
e = e || window.event //兼容的写法 e.c;ientX/e.clientY 当前鼠标触发点距离左上角的坐标值
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 || (clientY + (document.documentElement.scrollTop || document.body.scrollTop))
e.type：存储的当前鼠标触发的行为类型"click"
e.target 事件源，当前鼠标触发的是哪个元素，那么它存储的就是哪个元素，但是在IE6~8不存在这个属性(undefined)，用e.srcElement来获取事件源
e.target = e.target || e.srcElement //兼容性处理
e.preventDefault：阻止浏览器的默认行为，在IE6~8中没有这个方法，我们需要使用e.returnValue=false 来代替
e.preventDafault ? e.preventDefault() : e.returnValue=false 这样写和return false的效果是一样的，都是阻止默认行为
e.stopPropagation：阻止事件的冒泡传播，在IE6~8中不兼容，使用e.cancelBubble=true来代替
事件的传播机制：
事件的默认传播机制
捕获事件：从外到内依次查找元素
目标阶段：当前事件源本身的操作
冒泡阶段：从内到外依次触发相关的行为(我们最常用的就是冒泡阶段)
使用DOM0级事件绑定给元素的某一个行为绑定的方法，都是在行为出发后的冒泡阶段把方法执行
不同浏览器传播的最顶层的位置是不一样的，在谷歌浏览器中是可以传播到document的，在IE中只能传播到HTML
addEventListener：第一个参数是行为类型，第二个参数是给当前的行为绑定方法，第三个参数是控制在哪个阶段发生：true 在捕获阶段发生，false 在冒泡阶段发生
onmouseover和onmouseenter 都是鼠标进入的事件，但是onmouseenter不会发生事件的传播，自动的阻止了事件的传播，而onmouseover没有这个功能，需要手动阻止事件的传播