如何检查对象 js 上的侦听器 - Javascript

当需要找出一个对象上的所有事件侦听器时，可以使用以下方法:

1. 使用 getEventListeners() 方法

在 Chrome 开发者工具中，可以使用 getEventListeners() 方法来获取DOM元素上的所有事件侦听器。

代码片段

const element = document.querySelector('#id');
console.log(getEventListeners(element));

返回结果

返回的结果是一个对象，包括事件类型和函数的列表。

{
  click: [{…}],
  mouseenter: [{…}],
  mouseleave: [{…}]
}

2. 使用 EventListenerList 对象

可以使用 EventTarget.addEventListener(type, listener[, options]) 方法添加事件侦听器来调用一个对象或元素上的所有事件侦听器。然后使用 EventTarget.removeEventListener() 移除移除侦听器。

代码片段

const element = document.querySelector('#id');
const listenerList = element.addEventListener('eventName', function() { console.log("eventName triggered") });

console.log(listenerList);

返回结果

返回的结果是一个列表，包含所有事件侦听器函数的引用。

[ƒ]

3. 使用 debugger

最后，使用debugger（调试器）来查找代码中的事件侦听器。

代码片段

在代码中添加 debugger 语句，启动调试器，然后手动运行代码并检查事件侦听器。

返回结果

结果是可以直接在调试器中查看的。

以上是三种查找 JavaScript 对象上事件侦听器的方法。