How do I identify which events have bound via JavaScript?

Question

Possible Duplicates:
How to debug Javascript/jQuery event bindings with FireBug (or similar tool)
How to find event listeners on a DOM node?

How do I detect which events have been bound to a DOM element through JavaScript? In the example below I would like to be able to see that the click event has been bound on my 'clickable' span, and if possible be able to debug from the alert-line.

Can I do this with a web developer utility like Firebug?

<html>
    <head>
         <title>Events bound with JavaScript</title>
         <script type="text/javascript"
             src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
         <script type="text/javascript">
             $(document).ready(function() {
                 $("#clickable").click(function() {
                     alert("Clicked.");
                 });
             });
         </script>
    </head>
    <body>
         <span id="clickable">Click me</span>
    </body>
</html>

Dup: http://stackoverflow.com/questions/570960/how-to-debug-javascript-jquery-event-bindings-with-firebug-or-similar-tool/ — Crescent Fresh, Jul 23 '09 at 14:47
this one too: http://stackoverflow.com/questions/446892/how-to-find-event-listeners-on-a-dom-node — geowa4, Jul 23 '09 at 14:52

RaYell · Answer 1 · 2009-07-23T15:36:52.870

// this function will return number of keys in object
function objectLenght (obj) {
    var len = 0;
    for (var key in obj) {
        len++;
    }
    return len;
}

var objWithClickEvents = [];

// iterate through all elements
$('*').each(function() {
    var clickEvents = $.data($(this)[0], 'events').click;
    if (objectLength(clickEvents) > 0) {
        objWithClickEvents[objWithClickEvents.length] = $(this);
    }
});

Replace click with other event if you wish.

How do I identify which events have bound via JavaScript?

1 Answers1