在前端开发中，经常需要检查一个元素是否已经绑定了某个事件。这种情况通常发生在我们需要重新绑定事件时，或者需要避免对同一元素重复绑定相同事件的情况下。
事件绑定机制
在 HTML 中，可以使用 addEventListener() 方法来为指定元素添加事件监听器，该方法接受三个参数：
------------------------------- --------- ------------
其中，event 表示要监听的事件类型，如 click、mouseover、keydown 等；function 是事件触发后执行的函数；useCapture 是一个可选参数，表示事件是否应该在捕获阶段处理。
在 jQuery 中，可以使用 on() 方法来绑定事件，该方法也接受三个参数：
--------------------- ----------
其中，selector 表示要绑定事件的元素，可以是标签名、类名、ID 等选择器；event 和 function 同上。
如何检查元素上是否存在事件
原生 JavaScript 方式
在原生 JavaScript 中，可以使用 getEventListeners() 方法来获取指定元素上绑定的所有事件：
--- ------ - ---------------------------
该方法返回一个对象，包含了所有事件的名称和对应的函数。如果元素上没有绑定任何事件，则返回一个空对象 {}。
因此，我们可以使用 Object.keys() 方法来判断该对象是否为空：
-- --------------------------- --- -- - -- ----------- - ---- - -- ------------ -
jQuery 方式
在 jQuery 中，可以使用 data() 方法来获取指定元素上存储的所有数据，包括绑定的事件：
--- ------ - --------------------------
该方法返回一个对象，包含了所有事件的名称和对应的函数。如果元素上没有绑定任何事件，则返回一个 undefined。
因此，我们可以使用 typeof 来判断该对象是否为 undefined：
-- ------- ------ --- ------------ - -- ----------- - ---- - -- ------------ -
示例代码
下面是一个示例代码，演示如何检查一个按钮元素是否已经绑定了 click 事件：
------- ------------------- -----------
-- -- ---------- -- --- ------- - ------------------------------------ --- ------ - --------------------------- -- ------------------------------------- --- --- - ------------------ ----- ----- - ---- - ------------------- ----- ----- - -- ------ -- -------------------------- ---------- - ---------------------- --- --- ------ - ------------------------------ -- ------- ------ --- ------------ - ------------------------- - ---- - --------------------------- -
总结
在前端开发中，检查元素上是否存在事件是一项非常基础且实用的技能。通过原生 JavaScript 和 jQuery 两种方式，我们可以轻松地判断指定元素上是否已经绑定了某个事件，从而避免出现重复绑定、误删除等问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/9541