关于事件捕获与冒泡的执行顺序

最新推荐文章于 2024-07-19 11:40:48 发布

转载最新推荐文章于 2024-07-19 11:40:48 发布 · 118 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qimeng/p/7567295.html

文章标签：

#javascript #ViewUI

本文通过实例演示了当一个DOM元素同时绑定多个点击事件时，采用事件捕获和事件冒泡方式的不同执行顺序。测试结果表明，事件的执行顺序遵循先父级捕获再子级触发，最后父级冒泡的规律。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当我们给一个DOM同时绑定两个点击事件，一个用捕获另一个用冒泡，哪一个先执行?

我首先测试了仅有一个DOM时事件的发生顺序，发现事件发生的顺序与代码顺序有直接联系。谁写在前面谁就会先执行，不管是事件捕获还是事件冒泡。

第二次添加父节点又测试一次，看下面的代码。

HTML

<div class='box' style="width:200px; height:200px; background:lightblue">
    <div class="dv" style="width:100px; height:100px; background:pink"></div>
</div>

JavaScript

var dv = document.querySelector('.dv');
var box = document.querySelector('.box');
     
//父级绑定click事件冒泡
box.addEventListener('click', function(){ console.log('parent bubble') }, false);

//子级绑定click事件冒泡
dv.addEventListener('click', function(){ console.log('child bubble') }, false);
//子级绑定click事件捕获
dv.addEventListener('click', function(){ console.log('child capture') }, true);

//父级绑定click事件捕获
box.addEventListener('click', function(){ console.log('parent capture') }, true);