【原】JavaScript 怎么处理事件冒泡？

• 💂 个人网站:【海拥】【游戏大全】【神级源码资源网】
• 🤟 前端学习课程：👉【28个案例趣学前端】【400个JS面试题】
• 💅 寻找学习交流、摸鱼划水的小伙伴，请点击【摸鱼学习交流群】

目录

前言

在JavaScript中，事件冒泡是一种常见的事件传播机制。它可以让嵌套的元素接收到父元素触发的事件。本文将介绍事件冒泡的概念，并提供处理事件冒泡的方式和示例代码。

事件冒泡的概念

事件冒泡是指当一个元素触发了某个事件（例如点击事件），该事件将从最内层的元素开始，逐级向外传播到父元素，直到传播到文档根节点。这种事件传播的过程就是事件冒泡。

事件冒泡的处理方式

在处理事件冒泡时，有两种常用的方式：停止事件冒泡和使用事件委托。

停止事件冒泡

通过停止事件冒泡，可以阻止事件继续向父元素传播。在事件处理函数中，可以使用event.stopPropagation()方法来停止事件冒泡。调用该方法后，事件将不再传播到父元素。

使用事件委托

事件委托是一种将事件处理程序绑定到父元素而不是每个子元素的技术。通过事件委托，可以利用事件冒泡的特性，将事件处理委托给父元素来管理。这样可以减少事件处理程序的数量，提高性能和代码的可维护性。

示例代码

// HTML 代码：
<div id="parent">
  <div id="child">Click me</div>
</div>

// JavaScript 代码：
// 停止事件冒泡
document.getElementById("child").addEventListener("click", function(event) {
  event.stopPropagation();
  console.log("Child clicked");
});

document.getElementById("parent").addEventListener("click", function() {
  console.log("Parent clicked");
});

// 使用事件委托
document.getElementById("parent").addEventListener("click", function(event) {
  if (event.target.id === "child") {
    console.log("Child clicked");
  }
});

总结

事件冒泡是JavaScript中常见的事件传播机制。通过事件冒泡，可以让嵌套的元素接收到父元素触发的事件。在处理事件冒泡时，可以采用停止事件冒泡和使用事件委托两种方式。停止事件冒泡可以阻止事件继续向父元素传播，而事件委托利用事件冒泡的特性，将事件处理委托给父元素来管理，提高性能和代码的可维护性。示例代码展示了停止事件冒泡和使用事件委托的实现方式，帮助读者更好地理解事件冒泡的处理方法。通过灵活运用事件冒泡的处理方式，可以更好地处理和管理JavaScript中的事件。