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
– Christoph, Commented Sep 5, 2012 at 13:59
possible duplicate of Inspect attached event handlers for any DOM element — Christoph
– Christoph, Commented Sep 5, 2012 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
– Sachin Jain, Commented Sep 5, 2012 at 14:06

cassi.lup · Accepted Answer · 2012-09-06 07:00:07Z

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 6, 2012 at 7:00

answered Sep 5, 2012 at 14:03

cassi.lup

1,2617 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Christoph Over a year ago

works for events attached with jquery but not as attribute or native JS. Nevertheless useful for some cases I guess.

Christoph Over a year ago

This is crazy for a huge DOM, but at least it's a possibility;)

Sachin Jain Over a year ago

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.

cassi.lup Over a year ago

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

Collectives™ on Stack Overflow

Enumerate all events attached to HTML objects of a document

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related