Enumerate all events attached to HTML objects of a document

Question

After a lot of googling, I am here to ask if it is possible to enumerate all the events attached to HTML elements in a DOM.

For example: Suppose my document is

<body onscroll=docScrolled()>
    <span onmouseover=doSomethingElse()> Span is here </span>
    <div id="container">

    <script>
        $("#container").bind("click", doSomething);
</body>

After my document has been loaded and all the javascript code executed, I want to provide a button on clicking which display all the HTML elements and the events attached to them.

Ouptut

<body onscroll=docScrolled()> ------ onscroll
<span onmouseover=doSomethingElse()> Span is here </span> -----onmouseover
<div id="container"> ------onclick

So ultimately question is How to enumerate over all HTML elements and find out the events attached to them.

Sidenote: quote attributes `onscroll="doScrolled()"` and close the tags or you will land in HTML-Hell. Your reputation already matches ... ;) — Christoph, Sep 05 '12 at 13:59
possible duplicate of [Inspect attached event handlers for any DOM element](http://stackoverflow.com/questions/2623118/inspect-attached-event-handlers-for-any-dom-element) — Christoph, Sep 05 '12 at 14:02
Thanks Christoph for your sidenote. It was a typo as I wrote the code in question. Didn't copy paste from actual code. BTYW thanks :) — Sachin Jain, Sep 05 '12 at 14:06

cassi.lup · Accepted Answer · 2012-09-06T07:00:07.117

2

Here is a page that might help.

Also, this piece of code does something in the lines of what you're searching for:

// List bound events:
console.dir( $('#elem').data('events') );

// Log ALL handlers for ALL events:
$.each($('#elem').data('events'), function(i, event){
    $.each(event, function(i, handler){
        console.log( handler.toString() );
    });
});

UPDATE: https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference shows a list of events for DOM elements. You should create a function that checks if any event is assigned a function.

It would be something like:

var events = ["onchange","onkeydown",...]

function hasEventsAssigned(elem) {
    for (var i = events.length; i > 0; i--) {
       if (elem[events.i]) {
           /* do something */
       }
    }
}

edited Sep 06 '12 at 07:00

answered Sep 05 '12 at 14:03

cassi.lup

1,261
7
23

works for events attached with jquery but not as attribute or native JS. Nevertheless useful for some cases I guess. – Christoph Sep 05 '12 at 14:05
This is crazy for a huge DOM, but at least it's a possibility;) – Christoph Sep 05 '12 at 14:42
Thanks cassi.lup. your answer really made me learn something new and thanks for the great link. Can you please tell me how can we find out the events attached on window also. Like window.onscroll, window.onresize. How to list them too. – Sachin Jain Sep 06 '12 at 01:16
I've been thinking about this -- Any binding of events on the window can be done through native JS or jQuery, NOT throgh attribute (because you don't have a object).Thus, you can use jQuery to bind events on the window element. You could then use the .data('events') method to look for them, am i correct? OR you could use an array that you add each window event binding to, being able to check at a given moment in time what events have been binded to the window element. – cassi.lup Sep 06 '12 at 07:03

Enumerate all events attached to HTML objects of a document

1 Answers1