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.

Answer 1

Chrome's dev tools can help with this:

1. Point Chrome at the page
2. Right-click the date in the jQuery UI datepicker and choose "inspect element".
3. 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.)
4. 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.)

Answer 2

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');   
}