JS事件冒泡与捕获（addEventListener）

1、事件传播——冒泡与捕获

　　默认情况下，事件使用冒泡事件流，不使用捕获事件流。然而，在Firefox和Safari里，你可以显式的指定使用捕获事件流，方法是在注册事件时传入useCapture参数，将这个参数设为true。

2、冒泡事件流

　　当事件在某一DOM元素被触发时，例如用户在客户名字节点上点击鼠标，事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次，直到它遇到依附有该事件类型处理器的节点，此时，该事件是onclick事件。在冒泡过程中的任何时候都可以终止事件的冒泡，在遵从W3C标准的浏览器里可以通过调用事件对象上的stopPropagation()方法，在Internet Explorer里可以通过设置事件对象的cancelBubble属性为true。如果不停止事件的传播，事件将一直通过DOM冒泡直至到达文档根。

3、捕获事件流

　　事件的处理将从DOM层次的根开始，而不是从触发事件的目标元素开始，事件被从目标元素的所有祖先元素依次往下传递。在这个过程中，事件会被从文档根到事件目标元素之间各个继承派生的元素所捕获，如果事件监听器在被注册时设置了useCapture属性为true,那么它们可以被分派给这期间的任何元素以对事件做出处理；否则，事件会被接着传递给派生元素路径上的下一元素，直至目标元素。事件到达目标元素后，它会接着通过DOM节点再进行冒泡。

addEventListener第三个参数useCapture ，true时为捕获，false时为冒泡

捕获阶段是在冒泡阶段前面

代码示例1

示例代码

输出结果

---

4、阻止冒泡

w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true；

5、阻止默认行为

w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;

代码示例2：代码示例1添加里组织冒泡行为

在示例1的基础上，为所有事件添加 阻止冒泡行为

当点击id3：执行结果：id2

当点击id2：执行结果：id2

当点击id1：执行结果：id1

通过这个例子发现，原来阻止了事件冒泡，也阻止了事件继续向下级捕获。

---

总结：

关于JS 事件冒泡和onclick,click,on()事件触发顺序

onclick,click,on()的优先关系：onclick>click>on()；

onclick和click绑定的事件，彼此之间遵守事件冒泡规则，从内到外触发；

on()绑定的事件，总是晚于onclick和click绑定的事件触发；