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

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

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

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

// 捕获阶段
element.addEventListener('click', function(event) {
    
  console.log('捕获阶段');

}
    , true);


// 冒泡阶段
element.addEventListener('click', function(event) {
    
  console.log('冒泡阶段');

}
    , false);

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

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

}
    );


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

}
    );
    

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

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！