让你一眼看懂前端事件流，轻松掌握事件捕获与冒泡机制

2023-10-06 07:09:55

前端开发中，事件流机制是必备知识，它可以让你更好地理解和处理用户与网页的交互。在这篇文章中，我们将彻底搞懂前端事件流机制，让你在前端开发中如鱼得水。

给DOM添加事件响应

首先，让我们来了解一下如何给DOM添加事件响应。在HTML中，我们可以使用 onclick、onmouseover 等属性来为元素添加事件响应。例如，以下代码给 <button> 元素添加了一个点击事件监听器：

<button onclick="alert('Hello, world!')">点我</button>

当用户点击这个按钮时，就会弹出一个带有 "Hello, world!" 消息的警报框。

了解元素的默认行为

每个HTML元素都有自己的默认行为。例如，<a> 元素的默认行为是跳转到链接指向的页面，而 <input type="submit"> 元素的默认行为是提交表单。

当我们给元素添加事件响应时，可以阻止其默认行为。例如，以下代码阻止了 <a> 元素的默认行为：

<a href="https://example.com" onclick="event.preventDefault();">点我</a>

当用户点击这个链接时，不会跳转到 https://example.com 页面，而是会执行 event.preventDefault() 函数来阻止默认行为。

事件的冒泡与捕获机制

事件流机制中，事件的冒泡和捕获机制非常重要。事件冒泡是指事件从最内层的元素逐级向外传播，直到到达文档根元素。事件捕获是指事件从文档根元素逐级向内传播，直到到达最内层的元素。

默认情况下，事件会以冒泡的方式传播。例如，以下代码为 <div> 元素和 <button> 元素添加了点击事件监听器：

<div onclick="alert('Div clicked!')">
  <button onclick="alert('Button clicked!')">点我</button>
</div>

当用户点击按钮时，会先触发按钮的点击事件监听器，然后触发 div 元素的点击事件监听器。

我们可以使用 event.stopPropagation() 函数来阻止事件冒泡。例如，以下代码阻止了按钮的点击事件冒泡：

<div onclick="alert('Div clicked!')">
  <button onclick="event.stopPropagation(); alert('Button clicked!')">点我</button>
</div>

当用户点击按钮时，只会触发按钮的点击事件监听器，不会触发 div 元素的点击事件监听器。

我们可以使用 event.stopImmediatePropagation() 函数来阻止事件冒泡和捕获。例如，以下代码阻止了按钮的点击事件冒泡和捕获：

<div onclick="alert('Div clicked!')">
  <button onclick="event.stopImmediatePropagation(); alert('Button clicked!')">点我</button>
</div>

当用户点击按钮时，不会触发任何点击事件监听器。

事件委托

事件委托是一种处理事件的有效方法。它可以减少事件监听器的数量，提高性能。

事件委托的原理是，将事件监听器添加到父元素上，然后在事件处理函数中判断事件的目标元素是否符合我们的要求。如果符合，则执行相应的操作。

例如，以下代码使用事件委托来处理<div> 元素中所有按钮的点击事件：

<div onclick="handleButtonClick(event)">
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
</div>

<script>
function handleButtonClick(event) {
  const target = event.target;

  if (target.nodeName === 'BUTTON') {
    alert('你点击了按钮 ' + target.innerText);
  }
}
</script>