现在很多的框架事件中都有一个.capture,表示捕捉的时候执行,因此就涉及到事件的捕捉和冒泡了,两者顺序不同,时机也不相同,今天就再来回顾一下。

我们来看看上面demo的页面结构:

事件的传递是先捕捉,后冒泡,点击inner后,上面的demo发生捕捉冒泡如下图:

background Layer 1 body out inner 先捕捉 后冒泡

在原生js事件监听中,addEventerListener('click',f1,true),如果第三个参数为true表示在捕捉阶段监听,如果不填或者false则表示在冒泡阶段监听。

同样removeEventListener('click',f1,true)中的第三个参数也是同样的,true表示删除的事件捕获阶段的监听,不填或者false表示删除冒泡阶段的监听。

事件对象中的e.target表示当前触发的对象,e.currentTarget表示当前在事件流中的哪个对象上:

事件流可以通过e.stopPropagation()去阻断,例如阻断了捕获的某一个,那么后面的捕获和冒泡都不会进行;如果阻断了某个冒泡,那么后面的冒泡不会执行。

background Layer 1 body out inner 先捕捉 后冒泡 1 2 3 4 5 6 正常:1->2->3->4->5->6 body out inner 先捕捉 后冒泡 1 2(阻断) 阻断捕捉阶段的2:1->2 body out inner 先捕捉 后冒泡 1 阻断冒泡阶段的5:1->2->3->4->5 2 3 4 5(阻断)

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字