js 事件机制

在理解事件机制之前，需要了解两个概念：事件冒泡和事件捕获。事件冒泡是指事件在目标节点向上触发直至文档顶，而事件捕获是指从顶部向下触发至目标节点。

IE事件流：就是指事件冒泡，Netscape事件流是指事件捕获，I9+和其他现代浏览器支持。DOM事件流是指分三个阶段触发事件：1.事件捕获2.处于目标阶段3.事件冒泡。

怎么实现事件绑定的呢？

1.Dom0级事件 DomObj.eventType = function () {} DomObj是指一个dom对象，eventType是指事件类型，比如onclick，onmouseup等等。函数就是指事件触发时所执行的函数。这种绑定简单明了，但是有一个缺点，那就是不可以重复绑定相同事件，如果对一个元素进行相同类型的事件，那么后面的会覆盖前面的。

<div id='div1'> 
    <div id='div2'> 123</div>
</div>

var div1 = document.getElementById('div1');
div1.onclick = function () {
  alert('div1');      
}
div1.onclick = function () {
  alert('div2');      
}

//点击弹出div2

2.Dom2级事件 DomObj.addEventListener(event, fn, bool) DomObj是指一个dom对象，event是事件类型，这里不需要前面的on进行修饰，fn是事件触发的函数，bool为一个布尔值，默认值为false，在bool=true时声明是在事件捕获时触发，bool=false时是冒泡阶段。DomObj.addEventListener(event, fn, bool)，为移除事件绑定的函数，参数同上。

这种方式，可以为一个元素绑定多个事件。如果在低版本ie浏览器下，需要使用obj.attachEvent(event,fn)。obj是要添加事件的对象，event是事件类型，带on前缀，fn是事件处理函数，IE不支持事件捕获。obj.detachEvent(event,fn)为ie下事件移除函数。

<div id='div1'> 
    <div id='div2'> 123</div>
</div>

var div1 = document.getElementById('div1'),
     div2 = document.getElementById('div2');
div1.addEventListener('click', function() {
    alert('true div1');
}, true);
div1.addEventListener('click', function() {
    alert('false div1');
});
div2.addEventListener('click', function() {
    alert('true div2');
}, true);
div2.addEventListener('click', function() {
    alert('false div2');
});
//执行顺序为 true div1 => true div2 =>false div2 =>false div2
//注意 在目标阶段执行顺序不按照冒泡捕获，而是事件定义时的顺序