在前端开发中，我们经常使用 addEventListener 方法来为 DOM 元素添加事件监听器。而其中的 useCapture 参数可能会让一些开发者感到困惑。
什么是 useCapture？
useCapture 是一个布尔类型的参数，用于指定事件是否在捕获阶段进行处理。默认情况下，事件是在冒泡阶段处理的。
捕获和冒泡是什么？
事件处理分为三个阶段：捕获阶段、目标阶段和冒泡阶段。当一个元素触发了某个事件时，这个事件将从根节点开始向下传递，直到达到触发元素，然后再向上冒泡回去。
捕获阶段和冒泡阶段都可以为元素添加事件监听器。在默认情况下，事件只会在冒泡阶段进行处理，即先触发元素自身的事件监听器，再触发其父元素的监听器，依次往上冒泡。
而如果设置了 useCapture 为 true，则事件会在捕获阶段进行处理，即自顶向下地触发元素的监听器，直到达到触发元素为止。
如何使用 useCapture？
在 addEventListener 中，第三个参数可以指定 useCapture 的值，例如：
--------------------------------- ------------ ------
上述代码中，当 element 元素被点击时，handleClick 事件监听器将在捕获阶段进行处理。
useCapture 的应用场景
一般来说，我们都不太需要使用 useCapture。但有些情况下，它还是很有用的。
比如，当某个元素嵌套在另一个元素内部，并且这两个元素都有相同的事件监听器时，如果想要先触发外层元素的监听器，再触发内层元素的监听器，就可以使用 useCapture。
---- ----------- ---- ---------------- -------- ------ -------- ----- ----- - --------------------------------- ----- ----- - --------------------------------- ------------------------------- -- -- - ------------------ ---------- -- ------ ------------------------------- -- -- - ------------------ ---------- --- ---------
上述代码中，当点击内层元素时，会先触发外层元素的监听器打印 Outer clicked，再触发内层元素的监听器打印 Inner clicked。
总结
useCapture 是 addEventListener 方法中的一个参数，用于指定事件是否在捕获阶段进行处理。虽然平时很少用到，但在某些场景下仍然很有用。希望本文能够帮助你更好地理解 useCapture 的含义和用法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/8922