父子元素之间的事件触发机制

这一节我们来详细了解一下父子元素之间的事件处理机制。事件处理机制包括事件冒泡、事件捕获和事件代理。

事件冒泡

事件冒泡是指事件从被单击的元素开始向上冒泡到父元素直到文档对象的过程。例如，当您单击一个按钮时，该按钮的单击事件会触发，然后该事件会向上冒泡到该按钮的父元素，再到父元素的父元素，直到文档对象。在事件冒泡过程中，如果任何父元素上有相应的事件处理程序，它们都将被调用。

事件冒泡是默认的事件处理机制，这意味着如果您不阻止事件冒泡，事件将会从被单击的元素向上传播。

以下是一个示例，它演示了事件冒泡的过程：

<div id="outer">
  <div id="inner">
    <button id="btn">Click me!</button>
  </div>
</div>

document.getElementById('btn').addEventListener('click', (event) => {
  console.log('Button clicked!');
});

document.getElementById('inner').addEventListener('click', (event) => {
  console.log('Inner div clicked!');
});

document.getElementById('outer').addEventListener('click', (event) => {
  console.log('Outer div clicked!');
});

在上面的示例中，当您单击按钮时，事件将会触发并从按钮开始向上冒泡到 inner 元素，再到 outer 元素。在每个元素上，相应的事件处理程序都会被调用，并打印相应的消息到控制台。

事件捕获

与事件冒泡相反，事件捕获是指事件从文档对象开始，先到达最外层的父元素，再向下传递到被单击的元素。在事件捕获过程中，如果任何父元素上有相应的事件处理程序，它们都将被调用。

要使用事件捕获，可以将 addEventListener() 方法的第三个参数设置为 true。例如：

document.getElementById('outer').addEventListener('click', (event) => {
  console.log('Outer div clicked (capture)!');
}, true);

document.getElementById('inner').addEventListener('click', (event) => {
  console.log('Inner div clicked (capture)!');
}, true);

document.getElementById('btn').addEventListener('click', (event) => {
  console.log('Button clicked (capture)!');
}, true);

在上面的示例中，当您单击按钮时，事件将会先从文档对象开始向下传递到 outer 元素，再到 inner 元素，最后到达被单击的按钮。在每个元素上，相应的事件处理程序都会被调用，并打印相应的消息到控制台。

事件代理

事件代理是一种优化技术，它允许您将事件处理程序附加到父元素上，并在子元素上触发事件。事件代理的好处在于，您可以避免为每个子元素都附加事件处理程序，从而减少内存使用和代码维护的复杂性。

要使用事件代理，您需要在父元素上附加事件处理程序，并在事件处理程序中检查事件的 target 属性以确定被单击的子元素。以下是一个示例：

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

document.getElementById('list').addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    console.log(`Clicked ${event.target.textContent}`);
  }
});

在上面的示例中，我们在 ul 元素上附加了单击事件处理程序。当您单击 li 元素时，事件将会冒泡到 ul 元素，触发相应的事件处理程序。在事件处理程序中，我们检查事件的 target 属性以确定被单击的子元素，然后打印相应的消息到控制台。

小结

了解父子元素之间的事件处理机制是编写可靠和高效 JavaScript 代码的重要一步。使用事件冒泡、事件捕获和事件代理，您可以更好地控制事件的传播和处理。