JavaScript 事件冒泡简介及应用

JavaScript 事件冒泡简介及应用

事件冒泡是指在 HTML 的 DOM 树结构中，当某个元素触发了一个事件后，它会向父元素逐层传递，直至到达文档根节点。这种事件传递方式被称为事件冒泡。

冒泡机制的触发方式

当一个元素触发一个事件时，事件将从触发元素开始，然后向上冒泡到它的父元素，父元素的父元素，依此类推，直到冒泡到文档中的根元素为止。整个过程称为事件冒泡。

如何阻止事件冒泡

在事件处理程序中，可以使用 event.stopPropagation() 方法阻止事件冒泡：

document.querySelector('#inner').addEventListener('click', function(event) {
  console.log("Inner div clicked!");
  event.stopPropagation();
});

document.querySelector('#outer').addEventListener('click', function(event) {
  console.log("Outer div clicked!");
});

当点击 Inner 元素时，只会输出 Inner div clicked! ，而外层的 Outer 元素不会触发 click 事件，也就不会有输出。

事件委托

事件委托是利用事件冒泡机制实现的，它的原理就是将事件绑定到它的父节点上，利用事件冒泡的机制，触发到子节点的时候也会冒泡到父节点。这样我们就不需要在每个子元素上都绑定事件处理函数，而是把它绑定到它们的父元素上，从而提高性能。

以列表元素为例，如果我们需要在每个列表元素上绑定单击事件，可以像下面这样实现：

const myList = document.querySelector('#myList');

myList.addEventListener('click', function(event) {
  if (event.target.nodeName === 'LI') {
    console.log('List item clicked with text: ' + event.target.innerText);
  }
});

这里是给父元素 myList 绑定了 click 事件，当事件冒泡到 myList 时，判断是否点击的确实是 li 元素，然后输出列表元素包含的文本内容。

示例

示例一

HTML 代码：

<div id="outer">
  <div id="inner">Click me</div>
</div>

JS 代码：

document.querySelector('#inner').addEventListener('click', function(event) {
  console.log("Inner div clicked!");
  event.stopPropagation();
});

document.querySelector('#outer').addEventListener('click', function(event) {
  console.log("Outer div clicked!");
});

输出：

Inner div clicked!

示例二

HTML 代码：

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

JS 代码：

const myList = document.querySelector('#myList');

myList.addEventListener('click', function(event) {
  if (event.target.nodeName === 'LI') {
    console.log('List item clicked with text: ' + event.target.innerText);
  }
});

输出：

List item clicked with text: Item 1
List item clicked with text: Item 2
List item clicked with text: Item 3