How can I find out from firebug which method or methods are attached to the click event handler of a button?

This is the code of the button

<button class="rsmg_button_save ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary ui-state-focus" type="button" role="button" aria-disabled="false" style="display: inline-block;"><span class="ui-button-icon-primary ui-icon ui-icon-disk"></span><span class="ui-button-text">Save</span></button>

How can I find out from firebug which method or methods are attached to the click event handler of a button?

This is the code of the button

<button class="rsmg_button_save ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary ui-state-focus" type="button" role="button" aria-disabled="false" style="display: inline-block;"><span class="ui-button-icon-primary ui-icon ui-icon-disk"></span><span class="ui-button-text">Save</span></button>

• javascript
• jquery
• firebug

• Your question makes little sense. When a button is clicked, the browser generates the click event. What else do you want to know? A function can be installed to handle that event either with the onclick property or by installing an event listener - addEventListener() or attachEvent() depending upon browser/browser version. – jfriend00 Commented Jul 4, 2012 at 4:18
• The code is above. When i press it, some javascript function is fired that saves data in the database with ajax. But there is no onclick attribute specified on the button – themhz Commented Jul 4, 2012 at 4:20
• Then it's in a seperate function somewhere. Most developers don't care much for inline javascript handlers like onclick. – adeneo Commented Jul 4, 2012 at 4:22
• sure, but how can you know what function is hooked to that onclick event without seeing the onclick? – themhz Commented Jul 4, 2012 at 4:22
• 2 If you you chrome you can use the inspector, in the elements tab on the right at the bottom you'll see Event Listeners – Musa Commented Jul 4, 2012 at 4:25

3 Answers 3

If function is attached using jQuery, you can see it using firebug.
jQuery events are stored using data method and with key as events.
So $("desiredSelector").data("events") will show up all events attached to that particular element.
For details check this link.
For event defined in Javascript you can check the onClick property or use the method suggested by jfriend00.

EDIT :
There is a jQuery plugin which make this more simple.

Javascript code can hook up to button click events with either the onclick property or with addEventListener() or attachEvent() (depending upon browser and browser version).

If there is javascript code handling the event and there is no onclick handler specified in the HTML, then the javascript code is installing the event handler either by setting the onclick property later or by using addEventListener() or attachEvent().

I searched hard with $("desiredSelector").data("events") from above and also with GetEventListeners but in Firebug 2.x there is a very easy new way to find the bound events: If there is a bind-function you will find an "ev" right next to the row:

Cool Thing!