jQuery + DevTools：如何快速获取附加到元素的事件处理程序

Posted 2023-02-22

【中文标题】jQuery + DevTools：如何快速获取附加到元素的事件处理程序

【英文标题】：jQuery + DevTools: how can I quickly get the event handler(s) attached to the element

【发布时间】：2014-08-10 13:00:46

【问题描述】：

我问这个问题是因为我目前正在处理的项目中有超过 40K 行的非结构化 jQuery 代码。即使对这个代码库进行最智能的搜索也无法回答最简单的问题，例如

“如果我点击这个红色按钮会发生什么？”

意味着它无法将我指向杂乱代码中设置的事件处理程序。

在代码库中搜索选择器对我没有帮助，我得到了 300 多个搜索结果。

我知道 DevTools 中有 'Event Listeners' 选项卡，但它指向我在 jQuery 代码中的一行，所以我 完全没有使用它（至少我不知道怎么做）。

可能有一个很好的解决方案 - 在 DevTools 中按下暂停，所以如果你点击那个红色按钮，DevTools 会跳转到当前执行的代码行（jQuery 事件处理程序），你可以在一段时间后挖掘你的处理程序痛苦地迭代 jQuery 库）。但是有人添加了很多带有setInterval(... , 100) 和mouseovers 的横幅，让我没有机会在这里使用这个技巧......

（也许有一种方法可以从 jQuery 的深处获取事件处理程序的数组？？？）

所以，我需要找到那个函数集在

$('#my.red button').click(function() /* bla */ );

我相信应该有救援，朋友们。

我需要一种非常省时的方法/技术，因为我需要每天执行数百次这种搜索。

PS：如果处理程序是使用$.live 设置的呢？

【问题讨论】：

1) 我对你深表同情。 2) 当调用堆栈停在 jQuery 行时，您是否尝试过检查调用堆栈？这不是 100%，而且堆栈可能长得离谱，或者指向“外部代码” 3）最后，我只是在搜索中找到了这个，但我自己没有使用它：sprymedia.co.uk/article/Visual+Event+2

1)@JasonM.Batchelor，非常感谢您提供的链接！ 2) 调用堆栈无济于事，因为 a) 由于设置了多个 setIntervals 和 onmouseovers，我既不能暂停 javascript，也不能在 jQuery 的事件引擎中放置断点。 b) 当任何事件处理程序触发时，调用堆栈只有一层深。我需要更深入地了解库并获取附加的回调数组以在该特定事件上运行。 PS：看起来 jQuery 已经成为一个只写的库（对于那些记得 Perl 的人）:)。

How to find what code is run by a button/element in Chrome using Developer Tools 的可能副本

【参考方案1】：

Firebug 2.0 在其html panel 中有一个Events side panel，如果启用了选项显示包装的侦听器，则可以显示用户定义的函数。

.

包装的函数前面有一个箭头。

【讨论】：

这个功能是救命稻草！