事件冒泡和捕获

最新推荐文章于 2024-10-17 09:40:47 发布

AAA正在输入中

最新推荐文章于 2024-10-17 09:40:47 发布

阅读量191

点赞数 3

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_50012993/article/details/140292886

版权

js事件冒泡和捕获的区别

事件冒泡和捕获是DOM事件传播的两个阶段。

捕获阶段（Capturing Phase）：事件从最外层开始，逐层向内传播，直至目标元素。
冒泡阶段（Bubbling Phase）：事件从目标元素开始，向外逐层传播，最终到达最外层。

在JavaScript中，可以使用addEventListener函数第三个参数来指定是捕获阶段还是冒泡阶段监听事件：

false或省略：在冒泡阶段监听事件（默认行为）。
true：在捕获阶段监听事件。

例子代码：

// 获取元素

var parent = document.getElementById('parent');

var child = document.getElementById('child');

// 在捕获阶段添加事件监听

parent.addEventListener('click', function() {

console.log('parent capture');

}, true);

// 在冒泡阶段添加事件监听

child.addEventListener('click', function(e) {

// 阻止事件进一步冒泡

e.stopPropagation();

console.log('child bubble');

}, false);

在这个例子中，点击child元素时，会先打印parent capture，然后打印child bubble。通过调用e.stopPropagation()，阻止了事件继续冒泡到parent。如果没有调用e.stopPropagation()，则会继续打印parent capture。