Inspect jQuery Element Events

By  on  

Building on top of other tools can be incredibly difficult, especially when you didn't create the other tool and you can't replace that tool.  And when those other tools create loads of event listeners, you sometimes see odd behavior within the page and have no idea what the hell is going on.  Unfortunately a large part of client side coding and library usage comes down to fighting your own tools.

Luckily jQuery allows you inspect events that have been registered to a given element!  Here's the magic:

// First argument is the element you want to inspect
jQuery._data(document.body, "events");

jQuery Events

What's returned is an object whose keys represent the event names and the values are arrays of event handles that have been registered to the element and in the order they were registered.  You can even inspect the function URL location and its contents, then allowing you to see what code is messing with your page.  And then, after you've cursed out the other tool, you can monkey patch the problematic function.

Event listeners can really cause debugging misdirection within JavaScript, especially when you aren't an expert with a given framework.  Take the time to learn to leverage as many helper methods as you can -- they will save you hours of frustration.

Recent Features

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

Incredible Demos

  • By
    CSS Fixed Positioning

    When you want to keep an element in the same spot in the viewport no matter where on the page the user is, CSS's fixed-positioning functionality is what you need. The CSS Above we set our element 2% from both the top and right hand side of the...

  • By
    Google Extension Effect with CSS or jQuery or MooTools JavaScript

    Both of the two great browser vendors, Google and Mozilla, have Extensions pages that utilize simple but classy animation effects to enhance the page. One of the extensions used by Google is a basic margin-top animation to switch between two panes: a graphic pane...

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!