事件传递的激情：JavaScript 事件流冒泡的深入解读

2023-08-15 02:27:31

DOM 事件流：让网页交互熠熠生辉的舞台

当我们在网页上点击、移动鼠标或按下键盘时，这些交互都会触发一系列事件，这些事件的传递过程就是DOM 事件流 。深入了解 DOM 事件流的运作机制，对于创建交互式和响应式网页至关重要。

事件的华丽序幕：冒泡行为

事件流通常以 冒泡行为 开始。当一个事件发生在最内层的元素上时，该事件会逐级向上传播到 DOM 树中，直到到达最外层的文档对象。就像气泡在水中上升一样，事件逐级传递，给予每个元素处理该事件的机会。

// 监听按钮点击事件
document.querySelector('button').addEventListener('click', (e) => {
  console.log('按钮被点击了！');
});

// 监听文档点击事件
document.addEventListener('click', (e) => {
  console.log('文档被点击了！');
});

逆流而上的暗潮：捕捉行为

冒泡行为的相反面是 捕捉行为 。在这里，事件从最外层的文档对象开始传播，然后逐级向内传播，直到到达最内层的元素。这种逆流而上的行为允许元素拦截和处理事件，在事件传播到更具体的元素之前。

// 在文档加载时监听捕捉事件
document.addEventListener('click', (e) => {
  console.log('文档被点击了，在事件冒泡之前捕捉到！');
}, true); // true 表示启用捕捉行为

聆听元素心声：事件处理程序

事件处理程序 是 JavaScript 函数，它们时刻等待着事件的发生。当一个元素被触发了事件，其对应的事件处理程序就会被激活，执行预定义的代码逻辑，为用户提供交互反馈。

// 为按钮添加点击事件处理程序
document.querySelector('button').addEventListener('click', () => {
  alert('你好，世界！');
});

事件传播的终点：阻止事件传播

有时，我们希望某个事件仅限于触发元素内部，而不希望它继续向上冒泡。这时，我们可以使用 event.stopPropagation() 方法，就像是在事件传播的道路上设置了一道屏障，阻止事件继续传播。

// 阻止按钮点击事件冒泡
document.querySelector('button').addEventListener('click', (e) => {
  e.stopPropagation();
  console.log('按钮被点击了，但事件不会冒泡！');
});

阻止元素的默认行为：让元素保持个性

某些元素在触发事件时会执行一些默认的行为，比如 <a> 元素在被点击时会跳转到链接指向的页面。如果我们不想执行这些默认行为，可以使用 event.preventDefault() 方法，就像是在事件传播的道路上竖起了一个“禁止通行”的标志。

// 阻止表单提交时的默认行为
document.querySelector('form').addEventListener('submit', (e) => {
  e.preventDefault();
  console.log('表单已提交，但不会刷新页面！');
});

事件委托：效率提升的神奇开关

事件委托 是一种优化事件处理程序性能的技巧。它将事件处理程序注册到父元素上，然后在事件处理程序中判断事件是否发生在子元素上。这样可以减少事件处理程序的数量，从而提高网页的运行效率。

// 为父元素添加 click 事件处理程序，并委托子元素的 click 事件
document.querySelector('ul').addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') {
    console.log('列表项被点击了！');
  }
});