获得完整访问权限
测验

描述 JavaScript 和浏览器的事件冒泡

主题
Web APIJavaScript
在GitHub上编辑

TL;DR

事件冒泡是一种 DOM 事件传播机制，其中一个事件（例如点击）从目标元素开始，冒泡到文档的根。这允许祖先元素也响应事件。

事件冒泡对于事件委托至关重要，其中单个事件处理程序管理多个子元素的事件，从而提高性能和代码简洁性。虽然方便，但未能正确管理事件传播可能导致意外行为，例如多个处理程序为单个事件触发。

什么是事件冒泡？

事件冒泡是 DOM（文档对象模型）中的一种传播机制，其中一个事件（例如点击或键盘事件）首先在触发事件的目标元素上触发，然后向上（冒泡）通过 DOM 树传播到文档的根。

注意：甚至在事件冒泡阶段发生之前是 事件捕获 阶段，该阶段与冒泡相反，事件从文档根向下到目标元素。

冒泡阶段

在冒泡阶段，事件从目标元素开始，通过其在 DOM 层次结构中的祖先元素冒泡。这意味着附加到目标元素及其祖先的事件处理程序都可能接收并响应事件。

这里有一个使用现代 ES6 语法的示例，用于演示事件冒泡：

// HTML:
// <div id="parent">
//   <button id="child">Click me!</button>
// </div>
const parentDiv = document.createElement('div');
parentDiv.id = 'parent';
const button = document.createElement('button');
button.id = 'child';
parentDiv.appendChild(button);
document.body.appendChild(parentDiv);


const parent = document.getElementById('parent');
const child = document.getElementById('child');


parent.addEventListener('click', () => {
  console.log('Parent element clicked');
});


child.addEventListener('click', () => {
  console.log('Child element clicked');
});


// Simulate clicking the button:
child.click();

当您点击“Click me!”按钮时，由于事件冒泡，子元素和父元素的事件处理程序都将被触发。

停止冒泡

可以使用 stopPropagation() 方法在冒泡阶段停止事件冒泡。如果事件处理程序调用 stopPropagation()，它会阻止事件进一步冒泡到 DOM 树中，确保仅执行层次结构中该点之前的元素的处理程序。

// HTML:
// <div id="parent">
//   <button id="child">Click me!</button>
// </div>
const parentDiv = document.createElement('div');
parentDiv.id = 'parent';
const button = document.createElement('button');
button.id = 'child';
parentDiv.appendChild(button);
document.body.appendChild(parentDiv);


const parent = document.getElementById('parent');
const child = document.getElementById('child');


parent.addEventListener('click', () => {
  console.log('Parent element clicked');
});


child.addEventListener('click', (event) => {
  console.log('Child element clicked');
  event.stopPropagation(); // Stops propagation to parent
});


// Simulate clicking the button:
child.click();

事件委托

事件冒泡是称为 事件委托 的技术的基础，您将单个事件处理程序附加到多个元素的公共祖先，并使用事件委托来有效地处理这些元素的事件。当您有大量相似的元素（如项目列表）并且希望避免将单独的事件处理程序附加到每个项目时，这特别有用。

parent.addEventListener('click', (event) => {
  if (event.target && event.target.id === 'child') {
    console.log('Child element clicked');
  }
});

优点

  • 更简洁的代码： 减少事件监听器的数量，提高代码可读性和可维护性。
  • 高效的事件处理： 通过附加更少的监听器，最大限度地减少性能开销。
  • 灵活性： 允许处理子元素上发生的事件，而无需直接将监听器附加到它们。

陷阱

  • 意外的事件处理： 请注意，父元素可能会无意中捕获子元素发生的事件。使用 event.target 来识别触发事件的特定元素。
  • 事件顺序： 事件以特定顺序冒泡。如果多个父元素有事件监听器，它们的执行顺序取决于 DOM 层次结构。
  • 过度委托： 虽然将事件委托给公共祖先是有效的，但在 DOM 树中附加一个过高的监听器可能会捕获意外的事件。

用例

以下是一些使用事件冒泡编写更好代码的实用方法。

使用事件委托减少代码

想象一下，您有一个产品列表，其中包含许多项目，每个项目都有一个“立即购买”按钮。 传统上，您可以将单独的点击事件监听器附加到每个按钮：

// HTML:
// <ul id="product-list">
//   <li><button id="item1-buy">立即购买</button></li>
//   <li><button id="item2-buy">立即购买</button></li>
// </ul>


const item1Buy = document.getElementById('item1-buy');
const item2Buy = document.getElementById('item2-buy');


item1Buy.addEventListener('click', handleBuyClick);
item2Buy.addEventListener('click', handleBuyClick);


// ... 对每个项目重复 ...


function handleBuyClick(event) {
  console.log('点击了项目的购买按钮：', event.target.id);
}

随着项目数量的增加，这种方法变得很麻烦。 以下是事件冒泡如何简化事情的方法：

// HTML:
// <ul id="product-list">
//   <li><button id="item1-buy">立即购买</button></li>
//   <li><button id="item2-buy">立即购买</button></li>
// </ul>


const productList = document.getElementById('product-list');


productList.addEventListener('click', handleBuyClick);


function handleBuyClick(event) {
  // 检查点击的元素是否是列表中的一个按钮
  if (event.target.tagName.toLowerCase() === 'button') {
    console.log('点击了项目的购买按钮：', event.target.textContent);
  }
}

通过将监听器附加到父元素 (productList) 并在处理程序中检查被点击的元素 (event.target)，您可以用更少的代码实现相同的功能。 当项目是动态的时，这种方法可以很好地扩展，因为当项目列表发生变化时，不需要添加或删除新的事件处理程序。

下拉菜单

考虑一个下拉菜单，点击菜单元素（父元素）的任何地方都应该关闭它。使用事件冒泡，您可以使用一个监听器来实现这一点：

// HTML:
// <div id="dropdown">
//   <button>打开菜单</button>
//   <ul>
//     <li>项目 1</li>
//     <li>项目 2</li>
//   </ul>
// </div>


const dropdown = document.getElementById('dropdown');


dropdown.addEventListener('click', handleDropdownClick);


function handleDropdownClick(event) {
  // 如果在按钮外部单击，则关闭下拉菜单
  if (event.target !== dropdown.querySelector('button')) {
    console.log('下拉菜单已关闭');
    // 隐藏下拉菜单内容的逻辑
  }
}

在这里，点击事件从被点击的元素（按钮或列表项）冒泡到 dropdown 元素。 处理程序检查被点击的元素是否不是 <button>，并相应地关闭菜单。

手风琴菜单

想象一个手风琴菜单，点击一个部分标题（父级）会展开或折叠其下方的部分内容（子级）。 事件冒泡使这变得简单：

// HTML:
// <div class="accordion">
//   <div class="header">第 1 节</div>
//   <div class="content">第 1 节的内容</div>
//   <div class="header">第 2 节</div>
//   <div class="content">第 2 节的内容</div>
// </div>


const accordion = document.querySelector('.accordion');


accordion.addEventListener('click', handleAccordionClick);


function handleAccordionClick(event) {
  // 检查点击的元素是否是标题
  if (event.target.classList.contains('header')) {
    const content = event.target.nextElementSibling;
    content.classList.toggle('active'); // 切换内容的显示
  }
}

通过将监听器附加到 accordion 元素，单击任何标题都会触发该事件。 处理程序检查被点击的元素是否是标题，并切换相应内容部分的可见性。

延伸阅读

在GitHub上编辑