Find Event Handler With The Browser

24 May 2015

Specially with code bases you’re unfamiliar with, it’s quite hard to determine which code is handling a given event. You grep through the code randomly searching for the needle in the haystack. It’s not the most efficient way as you can see.

Before continuing, I just expect your website works reasonably well without JS; at least search crawlers should be able to index it properly. Let me advice JS as an enhancement to the user experience, not the be-all-end-all of your site.

The basic principle here is: the browser reacts on user interface events by calling the default event handler or a custom handler we have defined via JS. The browser therefore knows those events you defined in code. So…

Let’s query the browser

Chrome comes with getEventListeners($(‘#year’).get(0))

(pic)

But I must say, this output was pretty cryptic to my standards.

Enter jQuery

jQuery is the de facto standard for DOM manipulation and the base for other libraries. It has a very handy:

$._data($(‘#year’).get(0), “events”);

(pic)

Finding the element

The problem lies in finding the right element. Proposals: