编辑“︁JavaScript事件冒泡”︁

= JavaScript事件冒泡 =

'''事件冒泡'''（Event Bubbling）是JavaScript DOM（文档对象模型）中的一个重要机制，它描述了事件从触发元素向上传播到DOM树顶层的过程。理解事件冒泡对于处理用户交互、优化事件监听以及避免意外行为至关重要。

== 概述 ==

在DOM中，当某个元素触发事件（如点击、鼠标移动等）时，该事件不仅会在当前元素上触发，还会沿着DOM树向上传播，依次触发其祖先元素上的相同事件。这一过程被称为'''事件冒泡'''。

事件传播分为三个阶段：
1. '''捕获阶段'''（Capturing Phase）：事件从顶层向下传播到目标元素。
2. '''目标阶段'''（Target Phase）：事件到达目标元素。
3. '''冒泡阶段'''（Bubbling Phase）：事件从目标元素向上冒泡到顶层。

默认情况下，事件监听器在冒泡阶段触发。

=== 事件冒泡示例 ===
以下是一个简单的HTML结构和JavaScript代码，展示事件冒泡的行为：

<syntaxhighlight lang="html">
<div id="grandparent">
    Grandparent
    <div id="parent">
        Parent
        <div id="child">Child</div>
    </div>
</div>
</syntaxhighlight>

<syntaxhighlight lang="javascript">
document.getElementById('grandparent').addEventListener('click', () => {
    console.log('Grandparent clicked');
});

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

document.getElementById('child').addEventListener('click', () => {
    console.log('Child clicked');
});
</syntaxhighlight>

'''输出：'''
当点击'''Child'''元素时，控制台会依次输出：
<pre>
Child clicked
Parent clicked
Grandparent clicked
</pre>

这表明事件从子元素冒泡到父元素，再到祖父元素。

== 事件冒泡的用途 ==

事件冒泡机制允许开发者利用'''事件委托'''（Event Delegation）优化性能。例如，可以在父元素上监听子元素的事件，而不必为每个子元素单独绑定事件监听器。

=== 事件委托示例 ===
<syntaxhighlight lang="html">
<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
</syntaxhighlight>

<syntaxhighlight lang="javascript">
document.getElementById('list').addEventListener('click', (event) => {
    if (event.target.tagName === 'LI') {
        console.log('Clicked on:', event.target.textContent);
    }
});
</syntaxhighlight>

'''输出：'''
当点击任意一个'''<li>'''时，控制台会输出相应的文本内容，如：
<pre>
Clicked on: Item 2
</pre>

== 阻止事件冒泡 ==

在某些情况下，可能需要阻止事件继续冒泡。可以使用<code>event.stopPropagation()</code>方法。

=== 阻止冒泡示例 ===
<syntaxhighlight lang="javascript">
document.getElementById('child').addEventListener('click', (event) => {
    console.log('Child clicked');
    event.stopPropagation(); // 阻止事件冒泡
});

document.getElementById('parent').addEventListener('click', () => {
    console.log('Parent clicked'); // 不会执行
});
</syntaxhighlight>

'''输出：'''
当点击'''Child'''时，仅输出：
<pre>
Child clicked
</pre>

== 事件冒泡与事件捕获 ==

开发者可以通过<code>addEventListener</code>的第三个参数选择在捕获阶段或冒泡阶段监听事件：
* <code>true</code>：捕获阶段
* <code>false</code>（默认）：冒泡阶段

=== 捕获与冒泡对比示例 ===
<syntaxhighlight lang="javascript">
document.getElementById('grandparent').addEventListener('click', () => {
    console.log('Grandparent captured');
}, true); // 捕获阶段

document.getElementById('grandparent').addEventListener('click', () => {
    console.log('Grandparent bubbled');
}, false); // 冒泡阶段
</syntaxhighlight>

'''输出：'''
点击'''Child'''时，输出顺序为：
<pre>
Grandparent captured
Child clicked
Grandparent bubbled
</pre>

== 事件流图示 ==

<mermaid>
graph TD
    A[Document] --> B[HTML]
    B --> C[Body]
    C --> D[Grandparent]
    D --> E[Parent]
    E --> F[Child]
</mermaid>

事件流顺序：
1. 捕获阶段：Document → HTML → Body → Grandparent → Parent → Child
2. 目标阶段：Child
3. 冒泡阶段：Child → Parent → Grandparent → Body → HTML → Document

== 实际应用场景 ==

1. '''动态元素处理'''：如果页面动态添加元素，事件委托可以避免重新绑定事件。
2. '''性能优化'''：减少事件监听器的数量，提升页面性能。
3. '''统一事件管理'''：在父元素上统一处理子元素的交互逻辑。

=== 动态元素示例 ===
<syntaxhighlight lang="javascript">
// 动态添加按钮
const button = document.createElement('button');
button.textContent = 'Dynamic Button';
document.body.appendChild(button);

// 事件委托
document.body.addEventListener('click', (event) => {
    if (event.target.tagName === 'BUTTON') {
        console.log('Button clicked:', event.target.textContent);
    }
});
</syntaxhighlight>

== 总结 ==

* 事件冒泡是DOM事件传播的重要机制，事件从目标元素向上传播。
* 默认情况下，事件监听器在冒泡阶段触发。
* 可以使用<code>event.stopPropagation()</code>阻止事件冒泡。
* 事件委托利用冒泡机制优化性能，减少事件绑定。
* 理解捕获与冒泡的区别有助于更灵活地控制事件流。

掌握事件冒泡的概念，能够帮助开发者编写更高效、可维护的交互代码。

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript DOM]]