使用Chrome，如何查找绑定到元素的事件

假设我的页面上有一个链接：

<a href="#" id="foo">Click Here</a>

我什么都不知道，但是当我单击链接时，alert("bar")会显示一个。因此，我知道某个地方已经绑定了一些代码#foo。

如何找到alert("bar")将click事件绑定到的代码？我正在寻找Chrome的解决方案。

附注：这个例子是虚构的，所以我没有在寻找类似的解决方案：“使用XXXXXX并在整个项目中搜索“ alert（\“ bar \”）”。我想要一个真正的调试/跟踪解决方案。

使用Chrome 15.0.865.0开发版。在“元素”面板上有一个“事件侦听器”部分：

在此处输入图片说明

在“脚本”面板上还有一个“事件侦听器断点”。使用鼠标->单击断点，然后“进入下一个函数调用”，同时密切注意调用堆栈，以查看哪个userland函数处理该事件。理想情况下，你会用unminified一个替代的jQuery的精缩版，这样你就不必一步所有的时间和使用步过在可能的情况。

在此处输入图片说明

您还可以使用Chrome的检查器以另一种方式查找附加事件，如下所示：

这将带您到定义处理程序的位置，如下图所示，并由Paul Irish在此处进行解释：https : //groups.google.com/forum/#!topic/google- chrome-developer-tools/ NTcIS15uigA

“显示功能定义”

（截止到2020年）对于Chrome版本83.0.4103.61：

Google Chromes开发人员工具的脚本部分内置了搜索功能

如果您不熟悉此工具：（以防万一）

快速搜索#ID应该最终将您带到绑定功能。

例如：搜寻#foo会带您前往

$('#foo').click(function(){ alert('bar'); })

在此处输入图片说明

2018年更新-可能对将来的读者有所帮助：

我不确定这是最初在Chrome中引入的。但是现在可以在Chrome中完成此操作的另一种（简便）方法是通过控制台命令。

例如：（在铬控制台类型）

getEventListeners($0)

而$ 0是DOM中的选定元素。

findEventHandlers是一个jquery插件，原始代码在这里：https ://raw.githubusercontent.com/ruidfigueiredo/findHandlersJS/master/findEventHandlers.js

脚步

将原始代码直接粘贴到chrome的控制台中（注意：必须已加载jquery）
使用以下函数调用： findEventHandlers(eventType, selector);

查找对应的选择器，指定元素的eventType处理程序。

范例：

findEventHandlers("click", "#clickThis");

然后，如果有的话，可用的事件处理程序将显示以下消息，您需要展开以找到该处理程序，右键单击该函数并选择 show function definition

对于Chrome版本52.0.2743.116：

绑定元素的结果应显示在面板中，并说明其所在的文件。

本文地址：http://javascript.askforanswer.com/shiyongchromeruhechazhaobangdingdaoyuansudeshijian.html
文章标签：debugging , dom-events , google-chrome , inspector , javascript
版权声明：本文为原创文章，版权归 javascript 所有，欢迎分享本文，转载请保留出处！