DOM事件机制解惑(摘)--事件的传播机制

DOM事件流

为什么是有事件流？

假如在一个button上注册了一个click事件，又在其它父元素div上注册了一个click事件，那么当我们点击button，是先触发父元素上的事件，还是button上的事件呢，这就需要一种约定去规范事件的执行顺序，就是事件执行的流程。

浏览器在发展的过程中出现实了两种不同的规范

• IE9以下的IE浏览器使用的是事件冒泡，先从具体的接收元素，然后逐步向上传播到不具体的元素。
• Netscapte采用的是事件捕获，先由不具体的元素接收事件，最具体的节点最后才接收到事件。
• 而W3C制定的Web标准中，是同时采用了两种方案，事件捕获和事件冒泡都可以。

事件阶段

既然有了事件捕获和事件冒泡，那就应该约定是事件的流向，是先捕获还是先冒泡，所以W3C标准中规定了事件流的三个阶段的顺序：

1. 事件捕获阶段
2. 处于目标阶段
3. 事件冒泡阶段

有了捕获和冒泡这两种模式，我们就可以很好的控制父元素和子元素的事件执行顺序了

 

所以这里需要一种方法，不让事件向下捕获或向上冒泡

所以有了 e.stopPropagation() 方法，用于阻止事件的继续传递。

执行这条语句，无论我们是使用捕获模式还是冒泡模式，事件都不会继续传递，只会响应我们点击的元素。

 

http://coderlt.coding.me/2016/11/22/js-event/