一、事件流
人们为了描述一个事件的传播，人为的规定一个事件的传播的方向，称为事件流。
有两个阶段： 事件的冒泡和捕获阶段。
事件是先捕获的，再冒泡。
捕获是从上到下执行的【从最外层向最内层传播】。
冒泡是从下向上传播的【从最内层向最外层传播】。
二、事件监听
1. 0级事件监听
on***的语法添加的监听，称为DOM0级事件。
Onclick、 onmouseover 、 onmouseenter 、onmouseout 、onmouseleave 等等
DOM0级事件监听只能监听冒泡阶段。
事件的触发一个会按事件流的顺序执行。
DOM0级事件处理函数中，this指向的是触发事件的那个DOM元素。
DOM0级事件中，若给同一个DOM对象，绑定多个事件 ，后写的会覆盖先写的。
DOM0级事件监听，IE6、7、8中。事件只能冒泡到document阶段，没有window阶段。
2. DOM2级事件监听
DOM2级事件监听 用 addEventListener()函数
DOM元素.addEventListener(“事件名【没有on】”,”事件处理函数”,”是否监听捕获阶段”)box.addEventListener("click",function(){
alert("我是DOM2级事件监听的，我是box")
},true);
> 要记住：true表示监听捕获阶段，false能监听冒泡阶段。
> DOM2级事件监听，若给同一个元素绑定一个事件名同一个阶段添加多个监听的时候。彼此不会覆盖，先写的执行。
> `对于最内层盒子是先写先执行。 最内层盒子不区分冒泡盒捕获。`
> DOM2级事件处理函数中，this指向的是事件触发的那个DOM元素。
> DOM2级事件不会覆盖DOM0级事件，先写先执行。
3. 低版本IE的监听事件
低版本IE6、7、8中只支持DOM0级事件。DOM2级有自己的方法： attachEvent
attachEvent只接收两个参数第一个参数是事件名有on，第二个参数是事件处理函数。
没有第三个参数【不能监听阶段】。在IE6、7、8中只有冒泡阶段，永远监听不到捕获阶段的。
对同一个DOM元素绑定多个事件的时候，会按书写顺序的倒序执行。
在事件处理函数中this指向的是window对象，并不是事件对象。
事件是传播不到Window对象的，所以是绑定不了。
4. 事件监听的移除
DOM0级事件的移除简单，直接把onclick属性值设置为null。box.onclick = null;
DOM2级事件移除必须指名道姓。也就是说，每一个移除的函数需要起名。box.addEventListener("click",fun1,false);
function fun1(){
alert("我是DOM2级事件绑定的方法")
}
box.removeEventListener("click",fun1,false);
在低版本的IE中用 detachEvent方法，事件移除必须指名道姓。box.attachEvent("onclick", fun2);
function fun2(){
alert("低版本的IE中绑定的事件")
}
box.detachEvent("onclick", fun2);
总结
- 冒泡和捕获的监听
0级事件监听只能监听冒泡阶段。this指向的是触发事件的那个DOM元素。
2级监听事件当第三参数为true时监听捕获事件，为false时监听冒泡。this指向的是触发事件的那个DOM元素。 - 执行顺序
事件的执行是先冒泡再捕获，最里层的盒子不区分捕获和冒泡，先写先执行。
0级事件监听给同一个DOM绑定多个事件，后写的会覆盖先写的。
2级事件监听不会覆盖先写的先执行后写的后执行。 - 游览器版本
高版本的浏览器会冒泡得到window阶段，低版本的浏览器会冒泡得到document阶段。
- 关于IE678
IE6、7、8中是有自己的方法 attachEvent()，只能监听冒泡阶段。
事件名有on，this是window对象。可以设置同名的函数，但是会反复执行【事件栈】。
This是window对象，不是触发元素。事件只能冒泡到document阶段。
