Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

See all dom events for an element

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.

like image 314
Adam Rackis Avatar asked Jun 18 '12 16:06

Adam Rackis


People also ask

How do I view events fired on an element in Chrome?

To view events fired on an element, follow the below steps in Google Chrome: Open Google Chrome and press F12 to open Dev Tools. Go to Event Listener Breakpoints, on the right: Click on the events and interact with the target element.

How do I view events in console?

You can log all the events dispatched to an object using the Command Line API method monitorEvents(object [, events]) . The event objects are then logged to the Console. Useful when you need a reminder of the available properties on the event object.


2 Answers

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

like image 102
T.J. Crowder Avatar answered Sep 19 '22 07:09

T.J. Crowder


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');   
}
like image 31
Gabe Avatar answered Sep 21 '22 07:09

Gabe