Quiz

描述事件冒泡过程

Web APIsJavaScript

在GitHub上编辑

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

冒泡阶段

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

以下是使用现代 ES6 语法演示事件冒泡的示例：

// HTML:
// <div id="parent">
//   <button id="child">点击我！</button>
// </div>

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

parent.addEventListener('click', () => {
  console.log('单击了父元素');
});

child.addEventListener('click', () => {
  console.log('单击了子元素');
});

当单击 "点击我！" 按钮时，由于事件冒泡，子元素和父元素的事件处理程序都将被触发。

阻止传播

在冒泡阶段，可以使用 stopPropagation() 方法停止事件传播。如果事件处理程序调用 stopPropagation()，它将阻止事件继续向上冒泡到 DOM 树，确保只有位于层次结构中的元素的处理程序被执行。

事件委托

事件冒泡是一种称为 "事件委托" 的技术的基础，其中将单个事件处理程序附加到多个元素的共同祖先，并使用事件委托有效地处理这些元素的事件。当您有大量类似元素，例如项目列表时，希望避免为每个项目附加单独的事件处理程序时，这种方法特别有用。

参考资料

在GitHub上编辑