JavaScript事件流

最新推荐文章于 2024-11-02 12:42:04 发布

白砂糖与香辛料`

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量278

点赞数 8

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

本文链接：https://blog.csdn.net/z13903931414/article/details/137236282

版权

本文详细解释了JavaScript事件流的三个阶段：捕获、目标和冒泡，并通过HTML示例展示了如何在不同阶段添加事件监听器，以及`event.stopPropagation()`在阻止事件冒泡中的作用。

摘要由CSDN通过智能技术生成

JavaScript的事件流主要包括三个阶段：捕获阶段、目标阶段和冒泡阶段。当一个事件发生时，如点击一个按钮，这个事件会从最外层的祖先元素（通常是window对象）开始向下传递，这是捕获阶段。当事件到达触发事件的目标元素时，进入目标阶段。然后，事件会从目标元素开始，向上冒泡到最外层的祖先元素，这是冒泡阶段。

下面是一个演示JavaScript事件流的简单实例：

html<!DOCTYPE html>
<html>
<head>
<title>JavaScript 事件流示例</title>
<style>
#outer {
width: 300px;
height: 300px;
background-color: lightblue;
}
#middle {
width: 200px;
height: 200px;
background-color: lightgreen;
margin: 50px;
}
#inner {
width: 100px;
height: 100px;
background-color: lightyellow;
margin: 50px;
}
</style>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner">点击我</div>
</div>
</div>

<script>
var outerDiv = document.getElementById('outer');
var middleDiv = document.getElementById('middle');
var innerDiv = document.getElementById('inner');

// 在捕获阶段添加事件监听器
document.addEventListener('click', function(event) {
event.stopPropagation(); // 阻止事件冒泡
console.log('捕获阶段：document');
}, true); // 第三个参数为true表示在捕获阶段添加事件监听器

outerDiv.addEventListener('click', function(event) {
console.log('捕获阶段：outerDiv');
}, true);

middleDiv.addEventListener('click', function(event) {
console.log('捕获阶段：middleDiv');
}, true);

innerDiv.addEventListener('click', function(event) {
console.log('目标阶段：innerDiv');
});

middleDiv.addEventListener('click', function(event) {
console.log('冒泡阶段：middleDiv');
});

outerDiv.addEventListener('click', function(event) {
console.log('冒泡阶段：outerDiv');
});

document.addEventListener('click', function(event) {
console.log('冒泡阶段：document');
});
</script>
</body>
</html>

这个示例中，有三个嵌套的div元素，分别命名为outerDiv、middleDiv和innerDiv。我们在这些元素以及document对象上添加了点击事件的监听器，并指定了事件是在捕获阶段还是冒泡阶段触发。当你点击"点击我"这个文本时，控制台将输出事件流的顺序。

注意，在document对象的捕获阶段事件监听器中，我们调用了event.stopPropagation()方法来阻止事件冒泡。因此，尽管我们在document对象的冒泡阶段也添加了一个事件监听器，但它不会被触发。