迭代getEventListeners()返回对象

Question

我正在寻找一种方法来迭代对象getEventListeners(obj)返回的结果。这样，我就不需要特定的代码来迭代事件监听器类型，或者检查它们是否存在于已检查的元素上。

我的目标是从一个元素中删除一些事件侦听器。例如，删除所有与鼠标相关的事件侦听器，并保留其他事件侦听器。

- pure_bliss

Answer 1

getEventListeners(obj) 是一种仅适用于 Google Chrome 特定命令行工具 的功能。这意味着，您只能在手动输入控制台时，在 Chrome Dev 工具中使用此功能。您无法在实际的 JavaScript 源代码中使用此方法。

如果您想要实现您所描述的内容，就必须手动跟踪您的监听器。请查看此答案以获取进一步的说明。

- glutengo

---

Chrome特定工具的链接已经失效，正确链接为https://developer.chrome.com/docs/devtools/console/utilities/#getEventListeners-function，该页面列出了所有的工具。 - Stephan Luis

Answer 2

getEventListeners() 将返回一个简单的 JS 对象，您可以像这样迭代对象：

var listeners = window.getEventListeners(document.body);
Object.keys(listeners).forEach(event => {
    console.log(event, listeners[event]);
});

但看起来 getEventListeners 方法只在 Chrome 中可用，并且只能通过手动输入在 DevTools 中使用。

- Martin Adámek

---

谢谢，但我没有意识到这是针对Chrome浏览器的 :( 但是这确实是问题的答案，所以非常感谢。 - pure_bliss

getEventListeners 不是 JavaScript 函数（它只能在开发工具命令行上运行）。 - user1432181

有没有 getEventListeners 的替代函数？我可以在我的 JS 文件中使用哪个函数？ - Arif

@Arif 另一种选择是在数组或对象中跟踪您自己添加的事件侦听器。当然，这不会跟踪第三方代码添加的事件侦听器。没有其他选择。 - slebetman

Answer 3

我知道这是旧的，但有一个库可以在Chrome的开发工具之外使用.getEventListeners()函数。

https://github.com/colxi/getEventListeners

let myEl = document.getElementById('someElementId');

// add some event listeners to the Element
myEl.addEventListener('click', e=> console.log('click!') );
myEl.addEventListener('click', e=> console.log('click 2!') );
myEl.addEventListener('mouseover', e=> console.log('mouse over!') );

// retrieve the listeners
console.log( myEl.getEventListeners() );

可能对某人有帮助。

- W_ Jonesey