解释下事件冒泡和事件捕获的区别

JJCTO袁龙

于 2024-03-14 08:26:03 发布

阅读量1k

点赞数 28

分类专栏： JavaScript 文章标签：前端 javascript css

本文链接：https://blog.csdn.net/yuanlong12178/article/details/136697202

版权

JavaScript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

在前端开发中，事件冒泡和事件捕获是两种JavaScript事件传播机制。了解这两种机制对于理解前端开发中的事件处理非常重要。

首先，让我们来了解一下事件冒泡和事件捕获的概念：

事件冒泡（Event Bubbling）

事件冒泡是指当一个元素上的事件被触发之后，该事件会从最具体的元素（事件的目标）开始逐级向上传播，直到document对象。换句话说，事件会从最深的节点开始，然后逐级向上传播至最顶层节点。

事件捕获（Event Capturing）

事件捕获正好与事件冒泡相反，它是指事件从最顶层节点开始向下传播直到最具体的节点。也就是说，事件捕获是从document对象开始，逐级向下传播直到触发事件的目标元素。

区别：

执行顺序不同： 事件捕获的触发顺序是从外到内，而事件冒泡是从内到外。
是否支持： 所有浏览器都支持事件冒泡，但是早期的IE浏览器不支持事件捕获。
阻止默认行为： 通过event.stopPropagation()可以阻止事件冒泡，而通过event.preventDefault()可以阻止事件捕获。

下面是一个简单的示例代码来演示事件冒泡和事件捕获：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event Bubbling vs Event Capturing</title>
<style>
    div {
        width: 200px;
        height: 100px;
        background: lightblue;
        text-align: center;
        line-height: 100px;
        margin: 20px;
    }
</style>
</head>
<body>

<div id="outer">
    <div id="inner">Click me!</div>
</div>

<script>
    const outer = document.getElementById('outer');
    const inner = document.getElementById('inner');

    outer.addEventListener('click', function() {
        console.log('Outer Div - Event Bubbling');
    }, false);

    inner.addEventListener('click', function() {
        console.log('Inner Div - Event Capturing');
    }, true);
</script>

</body>
</html>