JS事件——事件流

当你点击一个div包裹着的p元素，浏览器是认为你点击了p元素，还是认为你点击了div元素？如果它们都绑定了事件，会执行谁的事件？执行顺序是什么？。。。

很久很久以前，针对这些问题有两种解决方案。

一种方案是，事件首先发生在DOM树的最高层对象(document)然后往最深层的元素传播。这种方式叫做事件捕获。在图例中，事件捕获首先发生在document上，然后是html元素，body元素，最后是button元素。

另一种恰好相反，事件促发的最深层元素首先接收事件。然后是它的父元素，依次向上，直到document对象最终接收到事件。这种方式叫做事件冒泡。

后来，W3C将两种方式结合起来，制定了统一标准，将事件的触发有三个阶段。即：

1. document 往事件触发地点，捕获前进，遇到相同注册事件立即触发执行

2. 到达事件位置，触发事件，如果该处既注册了冒泡事件，也注册了捕获事件，按照注册顺序执行

3. 事件触发地点往 document 方向，冒泡前进，遇到相同注册事件立即触发

   被触发的各级元素上的事件，都带有事件触发地的信息。假如点击的是p元素，它的父元素div上绑定的事件被触发，通过事件的target属性，就能看到事件触发地是p元素。

   支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法，useCapture参数是一个boolean值，true代表事件在捕获时执行，false代表在冒泡时执行 。 默认是false。

   关于IE7,8不支持w3c的 采用ele.attachEvent("onclick", doSomething2);统一采用冒泡类型。

   jQuery中为了兼容统一采用冒泡。

   总之，默认情况下都是采用冒泡类型。

   如果你想只触发事件触发地元素上的事件，就需要阻止事件冒泡

   在W3c中，使用e.stopPropagation（）方法

   在IE下设置e.cancelBubble = true；