See all dom events for an element

Question

I have a jQuery UI datepicker that, when you click on a date, clears my URL hash to #, and doesn't change the date in the textbox.

I assume there's some other JavaScript utility somewhere that has some sort of delegated event that's also being called, throwing an error, and killing the jquery handler.

How can I step through, and or see all delegated events match this dom element.

Dunno about that but you can open up Chrome's Dev Tools, go to the Scripts tab and put a breakpoint in the datepicker code and step through the JS code to see what gets executed. — sachleen, Jun 18 '12 at 16:31
Check this question. https://stackoverflow.com/questions/446892/how-to-find-event-listeners-on-a-dom-node-in-javascript-or-in-debugging — dotcoder, Jan 20 '23 at 07:45

score 11 · Accepted Answer · edited May 23 '17 at 12:26

Chrome's dev tools can help with this:

Point Chrome at the page
Right-click the date in the jQuery UI datepicker and choose "inspect element".
On the far right-hand side, there's an accordian with various things. Near the bottom is "Event Listeners". (Current versions of Chrome's dev tools are very smart about this, including querying jQuery's handler chain.)
Expand the "Event Listeners" tree item and you'll see a list of hooked events related to that element, even if the handler isn't set specifically on that element. (For instance, if you did this with the upvote button on the question, you'd see that click is hooked both for a.vote-up-off and document.) So you can kick around those to see what direct and delegated handlers relate to that event for that element.

Other than that, you could use the un-minified version of jQuery and walk through the event dispatch when you click the date in the datepicker.

And of course, Gabe's shown how you can get the jQuery-specific handlers via the undocumented jQuery events data. (That won't show you delegated handlers (unless you walk the ancestor tree), and won't show you non-jQuery handlers that might be attached, but it's still pretty useful stuff.)

You're a god among men, TJ. Thank you as always. – Adam Rackis Jun 18 '12 at 16:37 — Adam Rackis, Jun 18 '12 at 16:37
@AdamRackis: LOL No worries, hope that helps. – T.J. Crowder Jun 18 '12 at 16:39 — T.J. Crowder, Jun 18 '12 at 16:39

Gabe · Answer 2 · 2012-06-18T16:40:00.697

4

With jQuery you can see all the elements events by accessing the events key of the data.

jsFiddle

Example:

HTML

<input type="text" id="myelement" />

JS

$(function() {


    var myelement = $('#myelement');
    myelement.click(function() {

        console.log('anonymous event');

    });

    myelement.click(anotherEvent);
    myelement.change(anotherEvent);

    var events = myelement.data('events');

    console.log('Number of click events:' + events.click.length);
    console.log('Number of change events:' + events.change.length);

});

function anotherEvent(){
    console.log('another event');   
}

edited Jun 18 '12 at 16:40

answered Jun 18 '12 at 16:32

Gabe

49,577
28
142
181

Will that also pick up delegated events? ie `$(document).on("click", "a", function() { ... });` if `#myelement` is an anchor, will it show this handler? – Adam Rackis Jun 18 '12 at 16:36
@AdamRackis: No, it won't. It will only show you directly-hooked handlers, not handlers further up the tree that may also get called: http://jsbin.com/ujipuz Of course, that doesn't mean you can't walk the element's ancestors and repeat the process for each of them, which would give you the full picture. +1 to Gabe – T.J. Crowder Jun 18 '12 at 16:41
I misunderstood, thought you were looking for a programatic solution rather than a debugging tool :) – Gabe Jun 18 '12 at 16:42
2

@Gabe - no worried - your answer is actually pretty useful to know, even if it doesn't apply to my particular case here. Thanks. – Adam Rackis Jun 18 '12 at 16:44

See all dom events for an element

2 Answers2

Linked