检查任何 DOM 元素的附加事件处理程序 [英] Inspect attached event handlers for any DOM element

问题描述

有什么方法可以查看 DOM 元素的任何事件附加了哪些函数/代码?使用 Firebug 或任何其他工具.

解决方案

使用传统的 element.onclick= handler 或 HTML 可以从脚本或调试器中的 element.onclick 属性中轻松检索.

使用 DOM Level 2 Events addEventListener 方法和 IE 的 attachEvent 附加的事件处理程序目前根本无法从脚本中检索.DOM Level 3 曾经提出 element.eventListenerList 来获取所有的监听器，但目前还不清楚这是否会成为最终规范.目前在任何浏览器中都没有实现.

作为浏览器扩展的调试工具可以访问这些类型的侦听器，但我不知道有任何实际可以这样做.

一些 JS 框架留下了足够的事件绑定记录来计算它们一直在做什么.Visual Event 采用这种方法来发现通过一些流行框架注册的侦听器.>

Is there any way to view what functions / code are attached to any event for a DOM element? Using Firebug or any other tool.

解决方案

Event handlers attached using traditional element.onclick= handler or HTML <element onclick="handler"> can be retrieved trivially from the element.onclick property from script or in-debugger.

Event handlers attached using DOM Level 2 Events addEventListener methods and IE's attachEvent cannot currently be retrieved from script at all. DOM Level 3 once proposed element.eventListenerList to get all listeners, but it is unclear whether this will make it to the final specification. There is no implementation in any browser today.

A debugging tool as browser extension could get access to these kinds of listeners, but I'm not aware of any that actually do.

Some JS frameworks leave enough of a record of event binding to work out what they've been up to. Visual Event takes this approach to discover listeners registered through a few popular frameworks.

这篇关于检查任何 DOM 元素的附加事件处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！