jQuery + DevTools：如何快速获取附加到元素的事件处理程序 [英] jQuery + DevTools: how can I quickly get the event handler(s) attached to the element

问题描述

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

I'm asking this question because I have a mess of 40K+ lines of unstructured jQuery code in the project I'm currently working on. Even the most intelligent search over this codebase fails to answer the simplest question like

如果点击此红色按钮会怎样？

"What happens if I click this red button?"

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

meaning it can't point me to the event handler set in the messy code.

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

Searching for selectors in codebase does not help me, I get 300+ search results.

我知道有'事件监听器选项卡，但它指向了jQuery代码中的一行，所以我完全没用它（至少我不知道如何）。

I know that there is 'Event Listeners' tab in DevTools, but it points me to a line in jQuery code, so I have completely no use of it (at least I don't know how to).

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

There could be a good solution for that - to press pause in DevTools, so if you click that red button, DevTools jumps to the line of code currently executed (jQuery event handler), and you can dig your handler out after some painful iterating over jQuery library). But someone has added lots of banners with setInterval(... , 100) and mouseovers leaving me no chance to use this trick here...

（也许有一种方法可以从jQuery的深层获取一系列事件处理程序???）

(Maybe there is a way to get an array of event handlers from the deeps of jQuery???)

所以，我需要找到

$（'＃my.red button'）中设置的函数。click（function（） {/ * bla * /}）;

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

我相信朋友应该有救援。

I believe there should be a rescue, friends.

我需要一种极其节省时间的方法/技术，因为我需要每天执行数百次搜索。

I need an extremely time-efficient method/technique, because I need to perform this searches hundreds of times per day.

PS：如果使用 $。live 设置处理程序怎么办？

PS: and what if the handler was set using $.live ?

推荐答案

Firebug 2.0 有一个 HTML HTML 面板，如果启用了选项 Show Wrapped Listeners ，则能够显示用户定义的函数。

Firebug 2.0 has an Events side panel within its HTML panel, which is able to show the user-defined functions if the option Show Wrapped Listeners is enabled.

< img src =https://i.stack.imgur.com/07Kcd.pngalt =Show Wrapped Listeners选项>。

.

包装的函数已经开始用箭头。

The wrapped functions are preceeded by an arrow.

这篇关于jQuery + DevTools：如何快速获取附加到元素的事件处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！