js事件监听机制(事件捕获)总结

2023年6月10日下午2:43 • JavaScript

JS事件监听机制(事件捕获)总结

什么是事件监听机制？

JavaScript事件监听机制是指浏览器在特定条件下，允许开发者在特定的DOM元素上注册回调函数，以便在特定的事件发生时进行响应。

事件类型

目前常见的事件类型可以分为以下三类：

用户交互事件：click、mousedown、mouseover等；
浏览器事件：load、resize、error等；
表单元素事件：submit、change等。

事件监听的两种方式

冒泡事件监听方式
捕获事件监听方式

冒泡事件监听方式

冒泡事件监听方式是指事件发生时，浏览器会首先执行最底层的元素上的回调函数，然后逐级向上执行，直到执行到最上层元素上的回调函数。该方式比较常见，也是浏览器默认的事件监听方式。

示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>冒泡事件监听方式示例</title>
</head>
<body>
  <div id="parent">
    <div id="child">
      Click me!
    </div>
  </div>
  <script>
    const parent = document.querySelector('#parent');
    const child = document.querySelector('#child');
    parent.addEventListener('click', (event) => {
      console.log('Clicked parent!');
    });
    child.addEventListener('click', (event) => {
      console.log('Clicked child!');
    });
  </script>
</body>
</html>

在上述代码中，当点击child元素时，控制台会输出两次Clicked child!，以及一次Clicked parent!。

捕获事件监听方式

捕获事件监听方式与冒泡事件监听方式相反，即在事件发生时，浏览器会首先执行最上层元素上的回调函数，然后逐级向下执行，直到执行到最底层元素上的回调函数。

示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>捕获事件监听方式示例</title>
</head>
<body>
  <div id="parent">
    <div id="child">
      Click me!
    </div>
  </div>
  <script>
    const parent = document.querySelector('#parent');
    const child = document.querySelector('#child');
    parent.addEventListener('click', (event) => {
      console.log('Clicked parent!');
    }, true); // 将捕获事件监听方式设为true
    child.addEventListener('click', (event) => {
      console.log('Clicked child!');
    }, true); // 将捕获事件监听方式设为true
  </script>
</body>
</html>

在上述代码中，当点击child元素时，控制台会输出一次Clicked parent!，以及两次Clicked child!。

捕获事件监听和冒泡事件监听的选择

在绝大多数情况下，冒泡事件监听方式可以满足网站开发的需求。但是，对于某些特殊的场景来说，我们需要使用捕获事件监听方式。

在某些场景下，冒泡事件监听可能会导致问题，例如：

父元素和子元素都添加了click事件监听，当子元素被点击时，会逐级冒泡触发父元素的click事件，从而多次触发点击事件。如果在每个父元素上添加“不再向上冒泡”(stopPropagation)方法的调用，则显得比较麻烦。
对于一些需要动态增删元素的网站来说，如果不小心在每个元素上都添加了click事件监听，那么会导致性能降低，以及冒泡次数过多，增加代码编写和维护的难度。

当然，在使用捕获事件监听方式时，需要注意以下两点：

所有浏览器都不支持focusin和focusout事件的冒泡，需要使用捕获事件监听方式。
除了IE9之前的版本，其他浏览器都可以使用addEventListener方法来注册捕获事件监听。

总结

JavaScript事件监听机制是一种灵活且有效的前端技术，可以帮助我们轻松实现网页上的交互功能。至于使用捕获事件监听还是冒泡事件监听，则需要根据具体的需求来进行选择，不能一概而论。

参考资料

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js事件监听机制(事件捕获)总结 - Python技术站