事件捕获与事件冒泡：前端开发的控场高手

2023-09-10 11:32:02

探索事件流的奥秘：掌握事件冒泡和事件捕获

在前端开发的舞台上，事件是用户与网页交互的幕后功臣。当用户点击、滚动或悬停时，这些动作都会触发事件，并在 DOM（文档对象模型）树中传播。理解事件流的概念，包括事件冒泡和事件捕获，对于前端开发人员至关重要。

事件冒泡：层层递进的事件传播

事件冒泡是一种事件传播机制，它遵循自下而上的路径。当一个事件触发时，它首先会影响最具体的元素（触发事件的元素），然后依次向上传播到其父元素、祖父元素，直到到达 DOM 树的根元素。

想象一个俄罗斯套娃，里面嵌套着一层又一层的套娃。当最里面的套娃被敲击时，震动会逐层传导到最外面的套娃。这就是事件冒泡的工作原理。

代码示例

<div id="parent">
  <button id="child">Click Me!</button>
</div>

// 为子元素注册事件处理程序
document.getElementById("child").addEventListener("click", function() {
  console.log("子元素被点击了！");
});

// 为父元素注册事件处理程序
document.getElementById("parent").addEventListener("click", function() {
  console.log("父元素被点击了！");
});

// 点击子元素时，"子元素被点击了！"和"父元素被点击了！"都会被打印在控制台中。

事件捕获：反向拦截的事件处理

事件捕获与事件冒泡相反，它遵循自上而下的路径。当一个事件触发时，它首先会影响 DOM 树的根元素，然后依次向下传播到子元素、孙元素，直到到达最具体的元素。

将事件捕获想象成一个由上至下投掷的飞镖，它会穿透每一层元素，直到到达最底层。

代码示例

<div id="parent">
  <button id="child">Click Me!</button>
</div>

// 使用事件捕获为根元素注册事件处理程序
document.addEventListener("click", function(event) {
  console.log("根元素被点击了！");

  // 阻止事件进一步传播到子元素
  event.stopPropagation();
}, true);

// 为子元素注册事件处理程序
document.getElementById("child").addEventListener("click", function() {
  console.log("子元素被点击了！");
});

// 点击子元素时，只有"根元素被点击了！"会被打印在控制台中，因为传播被阻止了。