前端系列第2集-如何让事件先冒泡后获取?

事件冒泡是指当一个元素上的事件被触发后，该事件会从该元素开始向上冒泡，直到传播到文档对象，并且可以被其他元素捕获。默认情况下，事件是先捕获后冒泡。如果希望事件先冒泡后获取，可以使用以下两种方法之一：

1. 使用事件委托（Event Delegation）

事件委托是一种通过在其父元素上监听事件并利用事件冒泡来处理其子元素上的事件的技术。例如，如果有一个包含多个按钮的列表，并且希望在单击每个按钮时执行相同的操作，可以将单击事件监听器添加到列表元素上，并使用事件对象来获取单击的按钮。

示例代码：

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

<script>
  const myList = document.querySelector('#myList');
  myList.addEventListener('click', (event) => {
    if (event.target.tagName === 'BUTTON') {
      // 在这里处理单击事件
    }
  });
</script>

在这个例子中，我们使用事件委托将单击事件监听器添加到列表元素上，并在事件处理程序中检查被单击的元素是否为按钮。这个方法可以确保事件先冒泡后获取，因为我们将监听器添加到父元素上，而不是每个子元素上。

1. 使用 setTimeout()

另一种方法是将事件处理程序延迟一小段时间再执行。在此期间，事件将继续向上传播并且可以被其他元素捕获。然后，事件处理程序将以一种稍微延迟的方式执行，以便事件有时间传播到父元素。

示例代码：

myButton.addEventListener('click', (event) => {
  setTimeout(() => {
    // 在这里处理单击事件
  }, 0);
});

在这个例子中，我们使用 setTimeout() 将事件处理程序延迟了 0 毫秒，以确保它以稍微延迟的方式执行。这个方法可以确保事件先冒泡后获取，因为事件处理程序在一小段时间后执行，以便事件有时间传播到父元素。

以下是一个使用事件委托的案例代码演示，该代码演示了如何在单击多个按钮时执行相同的操作：

HTML 代码：

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

JavaScript 代码：

const myList = document.querySelector('#myList');
myList.addEventListener('click', (event) => {
  if (event.target.tagName === 'BUTTON') {
    // 在这里处理单击事件
    console.log(`Clicked button with text: ${event.target.textContent}`);
  }
});

在这个例子中，我们将单击事件监听器添加到 myList 元素上，并使用 if 语句检查被单击的元素是否为按钮。如果是，我们就会在控制台中记录被单击的按钮的文本内容。由于我们使用了事件委托，因此无论用户单击哪个按钮，事件处理程序都会在 myList 元素上执行，并且事件对象中包含有关被单击的按钮的信息。这确保了事件先冒泡后获取，因为我们将监听器添加到父元素上，而不是每个子元素上。

总结

在事件处理中，事件冒泡和事件捕获是两种常见的事件传播机制。默认情况下，事件先捕获后冒泡。如果想要事件先冒泡后获取，可以使用以下两种方法之一：

1. 使用事件委托（Event Delegation）：将单个事件监听器添加到父元素上，以处理其子元素上的事件。由于事件冒泡会在整个文档中传播，因此在父元素上添加事件监听器可以确保事件先冒泡后获取。
2. 使用 setTimeout()：将事件处理程序延迟一小段时间再执行，以确保事件有时间传播到父元素。由于事件冒泡是在异步方式下完成的，因此使用 setTimeout() 函数可以确保事件先冒泡后获取。

在实际应用中，可以根据需要选择其中任何一种方法，以确保事件先冒泡后获取。

仓库地址：https://github.com/webVueBlog/WebGuideInterview