5

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>
themhz
  • 8,335
  • 21
  • 84
  • 109
  • 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 Jul 04 '12 at 04: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 Jul 04 '12 at 04:20
  • Then it's in a seperate function somewhere. Most developers don't care much for inline javascript handlers like onclick. – adeneo Jul 04 '12 at 04:22
  • sure, but how can you know what function is hooked to that onclick event without seeing the onclick? – themhz Jul 04 '12 at 04: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 Jul 04 '12 at 04:25
  • There are a few other questions on this already, e.g.: http://stackoverflow.com/q/446892/615754 (with discussion of doing it in FF or Chrome, etc.). – nnnnnn Jul 04 '12 at 04:29
  • and http://stackoverflow.com/questions/570960/how-to-debug-javascript-jquery-event-bindings-with-firebug-or-similar-tool – Musa Jul 04 '12 at 04:30
  • I was sure that somone has already asked such a question, but I couldnt find the post. My english isn't very Good. I am sorry for asking the same question. – themhz Jul 04 '12 at 04:38

3 Answers3

7

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.

Ajinkya
  • 22,324
  • 33
  • 110
  • 161
2

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

jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • and how can I see those hooks from firebug? – themhz Jul 04 '12 at 04:22
  • 2
    In Firefox, you could examine the `onclick` property. I don't know how to see `addEventListener()` event handlers in Firebug (or if you can). In Chrome, you select the desired object and look at the `Event Listeners` pane on the right hand side. – jfriend00 Jul 04 '12 at 04:25
  • nice man I found it from chrome as you mentiond. I am sure that firebug has it to – themhz Jul 04 '12 at 04:29
1

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:

enter image description here

Cool Thing!

Friedrich Kölbel
  • 111
  • 8