Javascript 使用 Chrome，如何查找绑定到元素的事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7338193/
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
Using Chrome, how to find to which events are bound to an element
提问by FMaz008
Lets suppose I've a link on my page:
假设我的页面上有一个链接：
<a href="#" id="foo">Click Here</a>
I don't know anything else, but when I click on the link, an alert("bar")is displayed.
So I know that somewhere, some code is getting bound to #foo.
我什么都不知道，但是当我单击链接时，alert("bar")会显示一个。所以我知道在某个地方，一些代码被绑定到#foo.
How can I find the code that is binding the alert("bar")to the click event?
I'm looking for a solution with Chrome.
如何找到将 绑定alert("bar")到 click 事件的代码？我正在寻找 Chrome 的解决方案。
Ps.: The example is fictive, so I'm not looking for solution like: "Use XXXXXX and search the whole project for "alert(\"bar\")". I want a real debugging/tracing solution.
Ps.：这个例子是虚构的，所以我不是在寻找像这样的解决方案：“使用 XXXXXX 并在整个项目中搜索“警报(\"bar\")”。我想要一个真正的调试/跟踪解决方案。
采纳答案by Ionu? G. Stan
Using Chrome 15.0.865.0 dev. There's an "Event Listeners" section on the Elements panel:
使用Chrome 15.0.865.0 开发版。Elements 面板上有一个“事件侦听器”部分：
And an "Event Listeners Breakpoints" on the Scripts panel. Use a Mouse -> click breakpoint and then "step into next function call" while keeping an eye on the call stack to see what userland function handles the event. Ideally, you'd replace the minified version of jQuery with an unminified one so that you don't have to step inall the time, and use step overwhen possible.
以及“脚本”面板上的“事件侦听器断点”。使用鼠标 -> 单击断点，然后“进入下一个函数调用”，同时注意调用堆栈以查看哪个用户空间函数处理事件。理想情况下，你会用unminified一个替代的jQuery的精缩版，这样你就不必一步所有的时间和使用步过在可能的情况。
回答by Matty J
You can also use Chrome's inspector to find attached events another way, as follows:
您还可以使用 Chrome 的检查器以另一种方式查找附加事件，如下所示：
- Right click on the element to inspect, or find it in the 'Elements' pane.
- Then in the 'Event Listeners' tab/pane, expand the event (eg 'click')
- Expand the various sub-nodes to find the one you want, and then look for where the 'handler' sub-node is.
- Right click the word 'function', and then click 'Show function definition'
- 右键单击要检查的元素，或在“元素”窗格中找到它。
- 然后在“事件侦听器”选项卡/窗格中，展开事件（例如“单击”）
- 展开各种子节点以找到您想要的子节点，然后查找“处理程序”子节点所在的位置。
- 右键单击“函数”一词，然后单击“显示函数定义”
This will take you to where the handler was defined, as demonstrated in the following image, and explained by Paul Irish here: https://groups.google.com/forum/#!topic/google-chrome-developer-tools/NTcIS15uigA
这将带您到定义处理程序的位置，如下图所示，并由 Paul Irish 在此处解释：https: //groups.google.com/forum/#!topic/google-chrome-developer-tools/ NTcIS15uigA
回答by Javier Armendariz
Give it a try to the jQuery Audit extension (https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg), after installing follow these steps:
尝试使用 jQuery Audit 扩展 ( https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg)，安装后按照以下步骤操作：
- Inspect the element
- On the new 'jQuery Audit' tab expand the Events property
- Choose for the Event you need
- From the handler property, right click over function and select 'Show function definition'
- You will now see the Event binding code
- Click on the 'Pretty print' button for a more readable view of the code
- 检查元素
- 在新的 ' jQuery Audit' 选项卡上展开 Events 属性
- 选择您需要的活动
- 从处理程序属性中，右键单击函数并选择“显示函数定义”
- 您现在将看到事件绑定代码
- 单击“漂亮打印”按钮以获得更易读的代码视图
回答by lovelyramos
For version Chrome Version 71.0.3578.98(Latest as of 2019):
对于Chrome 版本 71.0.3578.98（2019 年最新）：
Select the element you want to inspect
Choose the Event Listener tab
Make sure to check the Framework listeners to show the real javascript file instead of the jquery function.
选择要检查的元素
选择事件侦听器选项卡
确保检查框架侦听器以显示真实的 javascript 文件而不是 jquery 函数。
回答by Michael Jasper
Edit: in lieu of my own answer, this one is quite excellent: How to debug JavaScript/jQuery event bindings with Firebug (or similar tool)
编辑：代替我自己的答案，这个答案非常好：How to debug JavaScript/jQuery event bindings with Firebug (or similar tool)
Google Chromes developer tools has a search function built into the scripts section
谷歌浏览器开发者工具在脚本部分内置了一个搜索功能
If you are unfamiliar with this tool: (just in case)
如果您不熟悉此工具：（以防万一）
- right click anywhere on a page (in chrome)
- click 'Inspect Element'
- click the 'Scripts' tab
- Search bar in the top right
- 右键单击页面上的任意位置（在 chrome 中）
- 单击“检查元素”
- 单击“脚本”选项卡
- 右上角的搜索栏
Doing a quick search for the #ID should take you to the binding function eventually.
快速搜索 #ID 应该最终将您带到绑定功能。
Ex: searching for #foowould take you to
例如：搜索#foo会带你去
$('#foo').click(function(){ alert('bar'); })
回答by Kris Hollenbeck
2018 Update - Might be helpful for future readers:
2018 年更新 - 可能对未来的读者有所帮助：
I am not sure when this was originally introduced in Chrome. But another (easy) way this can be done now in Chrome is via console commands.
我不确定这最初是何时在 Chrome 中引入的。但是现在可以在 Chrome 中完成的另一种（简单）方法是通过控制台命令。
For example:(in chrome console type)
例如：（在铬控制台类型）
getEventListeners(findEventHandlers("click", "#clickThis");
)
Whereas $0is the selected element in the DOM.
而$0是 DOM 中的选定元素。
https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#0_-_4
https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#0_-_4
回答by unifreak
findEventHandlers is a jquery plugin, the raw code is here: https://raw.githubusercontent.com/ruidfigueiredo/findHandlersJS/master/findEventHandlers.js
findEventHandlers 是一个 jquery 插件，原始代码在这里：https://raw.githubusercontent.com/ruidfigueiredo/findHandlersJS/master/findEventHandlers.js
Steps
脚步
Paste the raw code directely into chrome's console(note:must have jquery loaded already)
Use the following function call:
findEventHandlers(eventType, selector);
to find the corresponding's selector specified element's eventType handler.
将原始代码直接粘贴到 chrome 的控制台中（注意：必须已经加载了 jquery）
使用以下函数调用：
findEventHandlers(eventType, selector);
找到对应的选择器指定元素的 eventType 处理程序。
Example:
示例：
##代码##Then if any, the available event handler will show bellow, you need to expand to find the handler, right click the function and select show function definition
然后如果有，可用的事件处理程序将显示如下，您需要展开找到处理程序，右键单击该函数并选择 show function definition
See: https://blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/
请参阅：https: //blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/
回答by Ghost Echo
For Chrome Version 52.0.2743.116:
对于 Chrome 版本 52.0.2743.116：
In Chrome's Developer Tools, bring up the 'Search' panel by hitting
Ctrl+Shift+F.Type in the name of the element you're trying to find.
在 Chrome 的开发者工具中，点击
Ctrl+Shift+ 调出“搜索”面板F。输入您要查找的元素的名称。
Results for binded elements should appear in the panel and state the file they're located in.
绑定元素的结果应该出现在面板中并说明它们所在的文件。
