个人对dom事件传递的理解

首先,事件流分为两种:1. 捕获 2. 冒泡

一、dom2级事件的触发过程(dom.addEventListener('click', function, false))

当我们给body下的div绑定一个点击事件时,事件触发流程如下

个人对dom事件传递的理解

先是进入捕获过程,触发window的点击事件,如果没有绑定事件或者执行完就继续执行子节点中的点击事件。以此类推,触发document、body,最后再到div的事件。

然后就进入到了冒泡过程了。还是像捕获时的机制一样,只不过顺序换了过来。直到window的事件完成。

我们绑定事件函数的时候,是有选择事件的触发阶段的,false则为冒泡(默认),true则为捕获。所以事件只会在整个流程中触发一次。同时,dom2级事件多次绑定会叠加触发的函数,并不会覆盖之前的。(jquery同理)

二、dom0级事件(dom.onclick = function)

dom0级事件只能绑定唯一一个,多次绑定时则后面的覆盖前面的。同时dom0级的事件触发阶段只能在冒泡阶段。


以上是个人的理解,如果有错误的地方欢迎在下方评论交流。