JavaScript 事件机制详解：冒泡、捕获与委托

1. 事件流

在 JavaScript 中，事件流描述了页面中接收事件的顺序。DOM事件规定的事件流包括三个阶段：

1. 捕获阶段（Capturing Phase）
2. 目标阶段（Target Phase）
3. 冒泡阶段（Bubbling Phase）

addEventListener的第三个参数

在常规使用中，addEventListener通常只需要两个参数：事件类型和事件处理函数。但实际上这个方法还支持第三个可选参数：

element.addEventListener(event, function, useCapture);

第三个参数useCapture默认为false，此时事件会在冒泡阶段触发处理函数；若设为true，则在捕获阶段触发处理函数。当省略该参数时，系统默认采用冒泡阶段的处理方式。

2. 事件冒泡（Event Bubbling）

事件冒泡是指事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点的过程。

示例：

<div id="outer">
    <div id="inner">
        <button id="button">点击我button>
    div>
div>

<script>
document.getElementById('button').addEventListener('click', function() {
    console.log('按钮被点击');
});

document.getElementById('inner').addEventListener('click', function() {
    console.log('inner div被点击');
});

document.getElementById('outer').addEventListener('click', function() {
    console.log('outer div被点击');
});
script>

当点击按钮时，事件冒泡的顺序是：

1. button -> console.log(‘按钮被点击’)
2. inner div -> console.log(‘inner div被点击’)
3. outer div -> console.log(‘outer div被点击’)

3. 事件捕获（Event Capturing）

事件捕获是从最不具体的节点开始接收事件，然后逐级向下传播到最具体的节点的过程。

示例：

<div id="outer">
    <div id="inner">
        <button id="button">点击我button>
    div>
div>

<script>
document.getElementById('outer').addEventListener('click', function() {
    console.log('outer div被点击 - 捕获阶段');
}, true); // 第三个参数设为 true 表示在捕获阶段处理事件

document.getElementById('inner').addEventListener('click', function() {
    console.log('inner div被点击 - 捕获阶段');
}, true);

document.getElementById('button').addEventListener('click', function() {
    console.log('按钮被点击 - 捕获阶段');
}, true);
script>

当点击按钮时，事件捕获的顺序是：

1. outer div -> console.log(‘outer div被点击 - 捕获阶段’)
2. inner div -> console.log(‘inner div被点击 - 捕获阶段’)
3. button -> console.log(‘按钮被点击 - 捕获阶段’)

4. 事件委托（Event Delegation）

事件委托是利用事件冒泡的特性，将事件处理器添加到父元素，而不是每个子元素单独设置事件处理器。这样做的好处是：

1. 减少内存消耗，提高性能
2. 动态添加的元素也能触发事件处理
3. 代码更简洁

示例：

<ul id="todo-list">
    <li>任务1li>
    <li>任务2li>
    <li>任务3li>
ul>

<script>
// 不好的做法：为每个li都添加事件监听器
const items = document.querySelectorAll('li');
items.forEach(item => {
    item.addEventListener('click', function() {
        console.log('点击了：' + this.textContent);
    });
});

// 好的做法：使用事件委托
document.getElementById('todo-list').addEventListener('click', function(e) {
    if (e.target.tagName === 'LI') {
        console.log('点击了：' + e.target.textContent);
    }
});

// 动态添加新元素，事件委托方式无需额外处理
const newItem = document.createElement('li');
newItem.textContent = '任务4';
document.getElementById('todo-list').appendChild(newItem);
script>

5. 阻止事件传播

有时我们需要阻止事件继续传播，可以使用以下方法：

element.addEventListener('click', function(e) {
    e.stopPropagation(); // 阻止事件冒泡
    // 或
    e.stopImmediatePropagation(); // 阻止事件冒泡，并阻止当前元素上的其他事件处理程序被调用
});

6. 总结

1. 事件冒泡和事件捕获是事件的两种不同传播方式
2. 事件委托利用了事件冒泡的特性，是一种优化性能的编程模式
3. 合理使用事件委托可以简化代码，提高性能，并且能更好地处理动态元素
4. 需要时可以使用 stopPropagation() 或 stopImmediatePropagation() 来控制事件传播