JavaScript 事件冒泡与捕获如何实现

在 JavaScript 中，事件冒泡和捕获是两种事件传播的机制。它们决定了事件从哪个元素开始触发，以及是否继续向下传播。默认情况下，事件处理程序首先在内部元素上执行（捕获阶段），然后在外部元素上执行（冒泡阶段）。

以下是如何实现事件冒泡和捕获的示例：

1. 使用 addEventListener 方法设置事件监听器并指定 useCapture 参数：

// 捕获阶段 element.addEventListener('click', function(event) {   console.log('捕获阶段'); }, true);  // 冒泡阶段 element.addEventListener('click', function(event) {   console.log('冒泡阶段'); }, false); 

2. 使用 attachEvent 方法设置事件监听器（仅适用于 Internet Explorer 浏览器）：

// 捕获阶段 element.attachEvent('onclick', function() {   console.log('捕获阶段'); });  // 冒泡阶段 element.attachEvent('onclick', function() {   console.log('冒泡阶段'); }); 

在这两个示例中，当用户点击元素时，控制台将首先输出 “捕获阶段”，然后输出 “冒泡阶段”。这表明事件首先在内部元素上执行捕获阶段，然后在外部元素上执行冒泡阶段。

注意：addEventListener 和 attachEvent 方法的参数有所不同。addEventListener 的第二个参数是一个布尔值，用于指定事件处理程序是在捕获阶段还是冒泡阶段执行。而 attachEvent 的第二个参数是一个字符串，仅当设置为 'true' 时，事件处理程序才会在捕获阶段执行。