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>
Improve this question
8
  • 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. 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 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. 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? 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 Commented Jul 4, 2012 at 4:25

3 Answers 3

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

thank you, I think that chrome has it easier though. But cool thanx again
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().

Improve this answer

3 Comments

and how can I see those hooks from firebug?
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.
nice man I found it from chrome as you mentiond. I am sure that firebug has it to
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!

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.