参考文章:www.quirksmode.org/js/events\_…
前言
今天聊聊事件捕获与事件冒泡。当然,我知道大多数人说的时候都喜欢反着说,我不知道是不是因为他们对这两个过程的执行顺序存在着误解而导致的。但是,今天查阅了相关文档之后,我觉得,还是应该这么说:“事件捕获”与“事件冒泡”。
W3C模型
w3c模型对于点击事件传播的规定是:
- 先执行事件捕获流,找到被点击元素的根节点,html这个节点,有没有绑定事件捕获的操作,如果有,执行。然后向着被点击的目标元素开始事件捕获流触发。
- 事件传播到目标本身,先执行目标的捕获事件,再执行目标的冒泡事件
- 开始从目标向父节点传递事件冒泡流,触发传播路径上节点的事件冒泡方法。直到html节点结束。
那么从上述过程来看,事件传播的顺序是:根元素事件捕获->.........->目标元素事件捕获->目标元素事件冒泡->.........->根元素事件冒泡。
注册方法
HTMLElement.addEventListener(eventName, function,false); // 事件冒泡
HTMLElement.addEventListener(eventName, function,true); // 事件捕获
补充
stopPropagation()方法既可以阻止事件冒泡,也可以阻止事件捕获。
stopImmediatePropagation()方法来阻止事件捕获,还可以阻止事件冒泡。
那么 stopImmediatePropagation() 和 stopPropagation()的区别在哪儿呢?
后者只会阻止冒泡或者是捕获。 但是前者除此之外还会阻止该元素的其他事件发生,但是后者就不会阻止其他事件的发生。
一般两个事件会同时使用,用来防止事件引发的副作用,以及事件丢失。
总结
事件捕获先执行,事件冒泡后执行。
虽然写的简陋些,但是意思表达的应该到位了。