DOM事件流
为什么是有事件流?
假如在一个button上注册了一个click事件,又在其它父元素div上注册了一个click事件,那么当我们点击button,是先触发父元素上的事件,还是button上的事件呢,这就需要一种约定去规范事件的执行顺序,就是事件执行的流程。
浏览器在发展的过程中出现实了两种不同的规范
- IE9以下的IE浏览器使用的是事件冒泡,先从具体的接收元素,然后逐步向上传播到不具体的元素。
- Netscapte采用的是事件捕获,先由不具体的元素接收事件,最具体的节点最后才接收到事件。
- 而W3C制定的Web标准中,是同时采用了两种方案,事件捕获和事件冒泡都可以。
事件阶段
既然有了事件捕获和事件冒泡,那就应该约定是事件的流向,是先捕获还是先冒泡,所以W3C标准中规定了事件流的三个阶段的顺序:
- 事件捕获阶段
- 处于目标阶段
- 事件冒泡阶段
有了捕获和冒泡这两种模式,我们就可以很好的控制父元素和子元素的事件执行顺序了
所以这里需要一种方法,不让事件向下捕获或向上冒泡
所以有了 e.stopPropagation()
方法,用于阻止事件的继续传递。
执行这条语句,无论我们是使用捕获模式还是冒泡模式,事件都不会继续传递,只会响应我们点击的元素。
http://coderlt.coding.me/2016/11/22/js-event/