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

1. 事件流

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

捕获阶段（Capturing Phase）目标阶段（Target Phase）冒泡阶段（Bubbling Phase）

addEventListener的第三个参数

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

element.addEventListener(event, function, useCapture);

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

2. 事件冒泡（Event Bubbling）

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

示例：

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

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

3. 事件捕获（Event Capturing）

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

示例：

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

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

4. 事件委托（Event Delegation）

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

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

示例：

• 任务1
• 任务2
• 任务3

5. 阻止事件传播

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

element.addEventListener('click', function(e) {

e.stopPropagation(); // 阻止事件冒泡

// 或

e.stopImmediatePropagation(); // 阻止事件冒泡，并阻止当前元素上的其他事件处理程序被调用

});

6. 总结

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