在前端开发中，我们经常需要动态地添加和移除事件监听器。然而，在某些情况下，我们可能需要检查特定的事件监听器是否已被附加到元素上。
本文将介绍如何通过 JavaScript 检查动态附加的事件监听器是否存在，并提供一些有用的代码示例和指导意义。
检查事件监听器的存在
要检查动态附加的事件监听器是否存在，我们可以使用以下方法：
1. 使用 getEventListeners 方法
在现代浏览器中，我们可以使用 getEventListeners 方法来获取指定元素上已附加的所有事件监听器。该方法返回一个对象，其中每个属性名都是一个事件名称，对应的属性值则是一个数组，包含了该元素上所有该事件类型的监听器函数。
我们可以遍历这个对象，查找我们感兴趣的事件类型是否存在，从而确定特定事件的监听器是否已经被附加。
-- --------------
----- --------- - --------------------------------------------------------
-- ---- ------- -----
--- ------ -------- -- ---------------- -
-- ------------------ --- --------------- -
--------------------------- -- -------- -- --- ---------
------
-
-上面的代码中，我们首先调用 getEventListeners 方法获取了 my-button 元素上已附加的所有事件监听器。然后我们遍历了 click 事件类型的监听器数组，查找是否有 myClickHandler 函数被附加。如果存在，则认为该监听器已经被附加。
2. 使用事件捕获和冒泡机制
另一种检查事件监听器是否存在的方法是利用事件的捕获和冒泡机制。当事件发生时，浏览器会按照特定的顺序在 DOM 树中查找与事件相关的监听器，并依次执行它们。
我们可以通过在事件处理程序函数中使用 event.stopPropagation() 方法来阻止事件继续向上或向下传播。这样，在事件处理程序内部，我们就可以确定某个特定的事件监听器是否被调用过。
------- -------------------- -----------
----- ------ - -------------------------------------
-- -- ------- -----
-------------------------------- -------- --------------- -
-- ----------
------------------------
-- - -------- ---- ---
-- -- ------- -----
-------------------------------- -------- --------------- -
-- -- -------- -------
-- ----------------- -
--------------------- -- --- -------- -- --- ---------
- ---- -
--------------------- -- -------- -- --- ---------
-
---
--- -------------- - ------
-- -- ------- --
---------------
-------- --------------- -
-------------- - -----
-在上面的代码中，我们首先向 my-button 元素注册了两个事件监听器。第一个监听器使用了事件捕获模式，并在内部调用了 event.stopPropagation() 方法来阻止事件继续向下传播。第二个监听器则是普通的事件冒泡模式。
在第二个监听器中，我们检查了 handler1 函数是否被调用过。如果没有，说明该事件监听器还未被附加；否则，表示它已经被附加了。
指导意义
在实际项目中，我们需要动态地添加和移除事件监听器，以便在不同情况下展现出不同的行为。但是，在某些情况下，我们需要确保某些特定
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/28698