Chrome 开发工具：告诉我什么类型的事件附加到元素但哪个文件？答案

【问题标题】：Chrome Dev Tools: Tells me what type of event is attached to element but which file?Chrome 开发工具：告诉我什么类型的事件附加到元素但哪个文件？
【发布时间】：2013-01-30 15:54:27
【问题描述】：

在 Chrome 中，当我右键单击 DOM 元素以查看附加了哪些事件侦听器时，它总是显示 jquery.min.js:2 。但是，我想知道我的哪些 JavaScript 文件包含该侦听器（例如单击事件侦听器）。

例如，哪个文件中有这段代码？

$('#clickMe').on('click', function(e){ //clicked});

【问题讨论】：

标签： jquery google-chrome google-chrome-devtools

【解决方案1】：

Chrome 无法知道这一点。

当您编写 $(...).click(function) 时，添加到函数中的事件处理程序始终在 jQuery 中。
Chrome 无法知道 jQuery 事件处理程序最终会运行什么回调。

【讨论】：

假设您是该项目的新开发人员。你如何找到回调？
我会查看每个文件并尝试找到准备好的绑定实例。除非按钮是动态添加的，否则它必须绑定在一个就绪函数中。 $(function(){...}) 或 $(document).ready(function(){...});

【解决方案2】：

如果您使用 addEventListener（而不是 $(...).click() ），那么 Chrome 开发工具会在您的文件中显示添加该处理程序的行。

【讨论】：