关于JS事件机制 - 事件冒泡

最新推荐文章于 2025-05-28 08:33:01 发布

才会写HTML

最新推荐文章于 2025-05-28 08:33:01 发布

阅读量1k

点赞数 22

CC 4.0 BY-SA版权

分类专栏：前端 javascript 事件机制文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/qq_37919791/article/details/144175007

前端同时被 3 个专栏收录

11 篇文章

订阅专栏

javascript

5 篇文章

订阅专栏

事件机制

3 篇文章

订阅专栏

事件冒泡控制深入讲解

在 JavaScript 中，事件冒泡（Event Bubbling）是事件传播的一个重要概念。控制事件冒泡，能够让开发者更加灵活地管理事件的触发顺序，避免不必要的事件处理。

1. 事件冒泡机制

事件冒泡指的是当一个事件被触发时，它会从目标元素（事件发生的元素）开始，逐层向上传播到父元素，直到最顶层的 document 或 window。事件会按照从子元素到父元素的顺序依次执行。

冒泡顺序示例：

假设有以下的 HTML 结构：

<div id="parent">
    <button id="child">Click me</button>
</div>

点击按钮时，button 上的 click 事件会首先触发。
事件会冒泡到父元素 <div id="parent"> 上。
事件继续冒泡，直到顶层的 document。

document.getElementById('parent').addEventListener('click', function() {
    console.log('Parent clicked');
});

document.getElementById('child').addEventListener('click', function() {
    console.log('Button clicked');
});

输出顺序：

Button clicked
Parent clicked

2. 控制事件冒泡

通过控制事件的冒泡，开发者可以决定事件是否继续传播到父级元素。这对于避免重复触发事件或优化性能很有用。

阻止事件冒泡

使用 event.stopPropagation() 方法可以阻止事件继续冒泡。

示例：

document.getElementById('child').addEventListener('click', function(event) {
    console.log('Button clicked');
    event.stopPropagation(); // 阻止事件冒泡
});

document.getElementById('parent').addEventListener('click', function() {
    console.log('Parent clicked');
});

输出：

Button clicked

在这个例子中，当点击 button 时，event.stopPropagation() 会阻止事件继续冒泡到父元素 <div>。

注意：

event.stopPropagation() 只阻止当前事件在 DOM 树中的进一步传播，但不会阻止其他同一目标元素上的事件触发。
如果多个事件处理器绑定在相同的元素上，它们仍然会按照绑定顺序依次执行，除非使用 event.stopImmediatePropagation()。

3. 阻止默认事件和冒泡的区别

阻止默认事件： 使用 event.preventDefault()，可以阻止事件的默认行为，比如阻止表单提交、链接跳转等。
阻止事件冒泡： 使用 event.stopPropagation()，可以阻止事件传播到父元素。

示例：

document.getElementById('parent').addEventListener('click', function(event) {
    alert('Parent clicked');
});

document.getElementById('child').addEventListener('click', function(event) {
    event.preventDefault(); // 阻止默认行为
    event.stopPropagation(); // 阻止事件冒泡
    alert('Button clicked');
});

在这个例子中，点击 button 时既阻止了事件的冒泡，又阻止了默认行为（比如链接跳转等）。

4. 捕获和冒泡阶段

事件有两个阶段：

捕获阶段（Capture phase）：事件从根元素向目标元素传递。
冒泡阶段（Bubble phase）：事件从目标元素向根元素传递。

JavaScript 默认是使用冒泡阶段来处理事件。如果希望在捕获阶段执行事件，可以通过 addEventListener 的第三个参数来指定。

示例：

document.getElementById('parent').addEventListener('click', function() {
    console.log('Parent clicked');
}, true); // 使用捕获阶段

document.getElementById('child').addEventListener('click', function() {
    console.log('Button clicked');
});

在这种情况下，事件首先会从 parent 元素开始（捕获阶段），然后再触发 child 元素上的事件。

输出顺序：

Parent clicked
Button clicked

5. `stopImmediatePropagation()`

stopImmediatePropagation() 不仅阻止事件的冒泡，还会立即停止当前事件的其他处理函数的执行。

示例：

document.getElementById('parent').addEventListener('click', function() {
    console.log('Parent clicked');
});

document.getElementById('child').addEventListener('click', function(event) {
    console.log('Button clicked');
    event.stopImmediatePropagation(); // 阻止当前事件的其他处理函数
});

document.getElementById('child').addEventListener('click', function() {
    console.log('This will not be executed');
});

输出：

Button clicked

在这个例子中，stopImmediatePropagation() 阻止了 button 元素上的后续事件处理函数的执行。

6. 使用事件冒泡的优势

事件冒泡能够减少事件处理器的数量和提高性能，尤其是在动态内容生成和大规模页面中。

动态内容处理

例如，你有一个父元素，内部有多个子元素，而这些子元素是动态生成的。通过事件冒泡，你可以只为父元素绑定一次事件处理器，而不需要为每个子元素单独绑定事件。

示例：

<ul id="parent">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

<script>
document.getElementById('parent').addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        alert(`You clicked ${event.target.textContent}`);
    }
});
</script>