jQuery + DevTools: how can I quickly get the event handler(s) attached to the element

橙三吉。 提交于 2019-12-05 04:22:34

问题


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.

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

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).

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...

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

So, I need to find that function set in

$('#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: and what if the handler was set using $.live ?


回答1:


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.

.

The wrapped functions are preceeded by an arrow.



来源:https://stackoverflow.com/questions/24315929/jquery-devtools-how-can-i-quickly-get-the-event-handlers-attached-to-the-el

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!