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

avatar
作者
猴君
阅读量:0

在 JavaScript 中,事件处理程序的执行顺序取决于事件捕获和事件冒泡。事件捕获是从根节点开始,逐级向下传递事件,直到到达目标元素。事件冒泡则是从事件目标开始,向上回溯至根节点。

以下是如何在 JavaScript 中实现事件冒泡和捕获的示例:

  1. 为元素添加事件监听器并指定 useCapture 参数:
element.addEventListener('click', function(event) {   console.log('捕获阶段'); }, true); // useCapture 设置为 true 表示在捕获阶段执行  element.addEventListener('click', function(event) {   console.log('冒泡阶段'); }, false); // useCapture 设置为 false 表示在冒泡阶段执行 
  1. 创建一个简单的 HTML 结构来测试事件冒泡和捕获:
<div id="parent">   父元素   <button id="child">子元素</button> </div> 
  1. 使用以下 JavaScript 代码测试事件冒泡和捕获:
const parent = document.getElementById('parent'); const child = document.getElementById('child');  parent.addEventListener('click', function(event) {   console.log('父元素捕获阶段'); });  child.addEventListener('click', function(event) {   console.log('子元素捕获阶段'); });  parent.addEventListener('click', function(event) {   console.log('父元素冒泡阶段'); });  child.addEventListener('click', function(event) {   console.log('子元素冒泡阶段'); }); 

当点击子元素时,事件处理程序将按照以下顺序执行:

  • 子元素捕获阶段
  • 父元素捕获阶段
  • 子元素冒泡阶段
  • 父元素冒泡阶段

通过调整 useCapture 参数的值,您可以在事件捕获或事件冒泡阶段执行自定义的处理程序。

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!