How can I see event handler of an element in DOM?

[kerdosa]

What is the correct rule to see user-defined event handlers of an
element in DOM? For example, the input element has onclick event
handler which is set to user-defined handler myClick(), then DOM
should show it, but most time it is not shown, but sometimes it is
shown, instead it is shown inside attributes property. Isn't this
onclick() user-defined function? or DOM function? I am not sure what
is the exact rule of this showing. Anybody knows?
<input id="myInput" type="button" onclick="myClick()" value="Sample" /
>

Also when it is shown in DOM, it does not have any detail info about
the actual event handler, this case info about myClick().

FF is the best tool I ever seen, but it would be very nice if we can
see all the event handlers in an element and the detail info of where
the actual hander is defined!

Thanks

hj

[John J Barton]

In case this helps: functions like "onclick" are not compiled
when the page loads. FF compiles them when they are used. For
example, the onclick function will not be defined until the user
click the myInput button the first time. My guess is that your
experience of "most of the time it is not shown" may be related
to this compile-on-use approach.

Firebug 1.01 does not track the event handler functions created by
FF. I have an experimental version of Firebug that does show them
once they are created. However I'm not sure this would help you.
What do you mean by and "detail info of where the actual hander
is defined!"? Isn't it defined in your element?

John.

[hj lee]

Thanks for your response. I tried a little more and found out that once debugger stopped inside the event handler, then FF shows an event handler in DOM tab.

In many cases when I hack a website like google I am having a hard time to figure out where the event handler is declared. For example below input element has onclick="myClick()", is there easy way to find out where myClick() is declared?

I want FF have new option menu like "Show event handlers" in DOM tab and also it shows where it is declared. If I click the event handler, FF switches script screen and show the actual javascript code of event handler.

[John J Barton]

An option like "show event handlers" isn't possible, at least the way
you describe
it. The expression
onclick="myClick()"
says "when the element is clicked, look up 'myClick' and call it".
Before the
click, we cannot tell what will result when 'myClick' is looked up.
Javascript
is entirely dynamic: user actions or network events can change the
function
called by myClick at any time up until the click. So the phrase
"where myClick()
is declared" makes no sense until the click occurs.

Perhaps what would help is "Break on Events" or a way to set a
breakpoint
on the element with the meaning "Break on Element Event"? I think
that would
be possible.

John.

> --
> Dream with longterm vision!
> kerdosa

[Mark Kahn]

Are you looking for the code where myClick() is declared (ie the function is declared)?  Or are you looking for where it's attached to the object?

1) function myClick(){ ... }

2) obj.onclick = myClick;

I think you're looking for the 2nd but I'm not really sure.  If you are then firebug doesn't, as far as I know, give you a way to view this...I'm not sure why you'd need to either, but you can try something like this:

DOMElement.watch('onclick', function(p, o, n){ alert('onclick is changing from '+o+' to '+n+'.'); });

this will give you an alert when it's attached...maybe  :-).  This might not work if it's attached using addEventListener.  Anyway, if it does give you an alert you can change the alert to a firebug break and there you go.

If not, you can try overriding HTMLElement.prototype.addEventListener to something that breaks and then forwards to the original function...ie:

HTMLElement.prototype.oldAddEventListener = HTMLElement.addEventListener ;
HTMLElement.prototype.addEventListener = function(){
  // cause firebug to break here;
  this.oldAddEventListener.call(arguments);
}

not positive if that'll work, but it's a start.

-Mark