有没有办法用 Javascript 找到元素的事件处理程序？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11863400/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a way to find the event handlers of an element with Javascript?
提问by Click Upvote
Say you have this div:
假设你有这个 div：
<div id="foo">bar</div>
And you do this:
你这样做：
$("#foo").click(someFunction);
somewhere inside your javascript code.
在你的 javascript 代码中的某个地方。
Once the page has been loaded, is there a way to find out, via firebug or inspect element in chrome, or anything else, that the click event for #foo is bound to someFunction? I.e, find this out without having to look through all your code?
一旦页面被加载，有没有办法通过firebug或chrome中的inspect元素或其他任何东西找出#foo的点击事件绑定到someFunction？即，无需查看所有代码即可找到这一点？
回答by ColBeseder
Chrome Developer tools does this.
Chrome 开发者工具就是这样做的。
- right click an element
- click inspect element
- in the right hand column, scroll down to event listeners
- 右键单击一个元素
- 单击检查元素
- 在右侧栏中，向下滚动到事件侦听器
This will give you a list of event listeners on the object that can be expanded to find their source and the attached function.
这将为您提供对象上的事件侦听器列表，可以展开这些事件侦听器以查找其源和附加功能。
Firebug has this information under the DOM tab, but it's less user friendly.
Firebug 在 DOM 选项卡下提供了此信息，但它对用户不太友好。
回答by Nope
You can use the console in browsers built-in developer tools. They are built-in for IE and Chrome while FF will need the Firebug AddOn installed. I don't know about other browsers.
您可以在浏览器内置的开发人员工具中使用控制台。它们是 IE 和 Chrome 内置的，而 FF 需要安装 Firebug AddOn。我不知道其他浏览器。
Using the debugger console you can use jQuery data("events")to query for the attached events of an element. In addition those consoles also let you dynamically drill down into any additional detail of the events you are interested in.
使用调试器控制台，您可以使用 jQuerydata("events")查询元素的附加事件。此外，这些控制台还允许您动态地深入了解您感兴趣的事件的任何其他详细信息。
$("#foo").data("events");
Executing the above in the console will display an object with a property for each event it found. In your example it returns an object with clickproperty of type array storing all click events.
在控制台中执行上述操作将显示一个对象，该对象具有它找到的每个事件的属性。在您的示例中，它返回一个具有click存储所有单击事件的数组类型属性的对象。
If you have click events and you want just that object you can execute the following in the console:
如果您有单击事件并且只想要该对象，则可以在控制台中执行以下操作：
$("#foo").data("events").click;
Each event object has a handlerproperty which will show you the function they are bound to:
每个事件对象都有一个handler属性，它会显示它们绑定到的函数：
Object
data: null
guid: 2
handler: function mytestFunction(){
arguments: null
caller: null
guid: 2
length: 0
name: "mytestFunction"
prototype: mytestFunction
__proto__: function Empty() {}
namespace: ""
origType: "click"
quick: null
selector: null
type: "click"
__proto__: Object
See DEMO, showing how to query and display the objects in the console.
请参阅DEMO，展示如何在控制台中查询和显示对象。
Alternatively you can also use the "handlers" for an overall summary object:
或者，您也可以将“处理程序”用于整体摘要对象：
$("#foo").data("handlers");
Note though that .data("events/handlers")will not include any events wired up embedded in html such as this:
请注意，.data("events/handlers")这不包括嵌入在 html 中的任何事件，例如：
<div id="foo" onclick="...">bar</div>
More information on the data()are in the documentation
关于更多的信息data()是在文档
回答by Laurent Perrin
I don't know about Firefox, but there's an easy way to see event listeners in Chrome and Safari. Just open the Developer Tools, select your element and scroll to the bottom of the CSS properties panel. You'll find an "Event Listeners" section.
我不了解 Firefox，但有一种简单的方法可以在 Chrome 和 Safari 中查看事件侦听器。只需打开开发人员工具，选择您的元素并滚动到 CSS 属性面板的底部。您会找到“事件侦听器”部分。
回答by Clyde Lobo
I would suggest using Visual Event 2.
我建议使用Visual Event 2.
Here is the descriptionon how to use it. I use it almost everyday and its a very good tool.
这是有关如何使用它的说明。我几乎每天都使用它，它是一个非常好的工具。
