How to get Events associated with DOM elements?

Question

I have an HTML document.
It is possible to get the events associated with every Element in a particular FORM element in the document using JavaScript.

var element = document.forms[i].elements[j];

This way I can get jth element in ith form, But can I get the event associated with the element.
There can be any number of elements in a form. I am using IE 8.

**EDIT :**
Actually I was trying to serialize HTML DOM into XML.

what I did to do this was :

createXML : function() {
        
        objSerializeDOM.msg += "";
        objSerializeDOM.msg += "<?xml version='1.0' encoding='UTF-8'?>\n\n";
        // Get all the forms in a document.
        var forms = document.forms;

        for ( var i = 0; i < forms.length; i++) {
            // Get all the elements on per form basis.
            elements = document.forms[i].elements;
            objSerializeDOM.msg += "<FORM name=\"" + forms[i].name + "\" method=\""
                    + forms[i].method + "\" action=\"" + forms[i].action + "\">\n\n";
            for ( var j = 0; j < elements.length; j++) {
                objSerializeDOM.msg += "    <" + elements[j].tagName + "  type=\""
                        + elements[j].type + "\"" + "  name=\""
                        + elements[j].name + "\"" + "   Value =\""
                        + elements[j].value + "\"  />\n";
            }
            alert(document.forms[i].elements[1].event);
        }
        objSerializeDOM.msg += "\n\n</FORM>\n\n";
        alert(objSerializeDOM.msg);
        objSerializeDOM.writeToFile(objSerializeDOM.msg);
    }

What I am getting from this is an XML :

<?xml version='1.0' encoding='UTF-8'?>

<FORM name="loginForm" method="post" action="/sigma/login.do;jsessionid=E6509E7BA55573AA5386274ABB93F718">

    <INPUT  type="hidden"  name="message"   Value =""  />
    <INPUT  type="hidden"  name="userAction"   Value =""  />
    <INPUT  type="text"  name="userId"   Value =""  />
    <INPUT  type="password"  name="passwd"   Value =""  />
    <INPUT  type="button"  name="button"   Value ="Continue"  />


</FORM>

Now suppose I have:

<input tabindex="7" name="button" type="button" class="button"
                style="width:100;height:30" Value="Continue" onclick='login()' />

All I want to do now is to get onClick in my XML or any event associated like onBlur() etc.

It depends on how the events have been attached to the elements. — Felix Kling, Jul 28 '11 at 08:08
Possible duplicate of http://stackoverflow.com/questions/446892/how-to-find-event-listeners-on-a-dom-node — Philip Ramirez, Jul 28 '11 at 08:08
Can you explain better what do you mean by *events*? Do you want to *attach events* to the elements, or you want to know which are the event you can *bind* to? — Pier Paolo Ramon, Jul 28 '11 at 08:08
Thanks Felix, but can you elaborate. I am a beginner in this area. — EMM, Jul 28 '11 at 08:13
Assuming you want to get the *event handlers*, you can only get them if they have been attached either *inline* as HTML attribute or as property. In any way, I suggest to read [these articles on quirksmode.org](http://www.quirksmode.org/js/introevents.html) which give a very comprehensive introduction to event handling in JavaScript (follow the links). — Felix Kling, Jul 28 '11 at 08:17
@mohit, the answers given to that question discuss how to inspect *event handlers* that are attached to DOM elements and describe how the method differs (or if it's even possible) depending on how the events were attached. — Philip Ramirez, Jul 28 '11 at 08:25
@Phil actually I want to do it pragmatically. Like I retrieved the element from the form in my question. — EMM, Jul 28 '11 at 09:01
@mohit If you look at the most upvoted answer in the question I linked to, it goes over how to inspect an arbitrary "element" programmatically (I'm assuming that's what you meant). In your case, the each single element can be taken by `var length = document.forms[i].elements.length; for (var j=0; j < length; j++) { var element = document.forms[i].elements[j]; }` Then, inside the loop you can use the information given by the answer. — Philip Ramirez, Jul 28 '11 at 09:07
@Phil your assumption is right.I would be more careful next time while commenting. I did
document.forms[i].elements[1].event
but it gives me undefined. I am afraid there is nothing that simple to get the associated events. — EMM, Jul 28 '11 at 09:28
@mohit that won't work because elements do not have an `event` property so you will always get `undefined` for that. Again, as the question I link to points out, the truth is that there no way to do it using the DOM — Philip Ramirez, Jul 28 '11 at 09:39

score 4 · Accepted Answer · answered Aug 04 '11 at 07:20

As Felix said in his comment, there are several ways to register an event on an object. So how you can get the events attached to an object and serialize them somehow to your xml depends on how they are registered. I will list some thoughts of how you can get them for serialisation.

1 Handlers registered inline

1.1 Completely inline code:

<INPUT  type="hidden"  name="message"   Value =""  onclick="alert('hello')"/>

When the code is completely inline, you can just get the attribute in your xml and save it.

2.1 Inline function call

In this case you would have to export the declaration of the function. In JavaScript Functions are objects itsself so you could actually get the declaration text of your function by invoking myFunc.toString(). The hard part on this would be to figure out, if this is a function call where the declaration hast to be exported or not.

2 Handlers registered through attributes

If you have added all your element Handlers through i.e. :

function myFunc(num){
  alert("Your number is: " + num);
}

document.getElementById('myElement').onclick = myFunc;

you could just iterate your form elements like you already do and get the onlick, onmouseover, onblur, on.... properties all one by one and save them to xml. Also in this case the content of this propertys will be Function Objects as well so to save their actual content you have to do .toString() on the Function object.

In addition there are some other ways to register Event handlers depending on the different Browsers. So if you definetly know how your events are registered, you can actually serialize them. If you don't that's going to be very difficult.

I hope that helps to get you a bit further.

score 1 · Answer 2 · answered Jul 28 '11 at 08:14

This probably isn't what you're looking for but may help you atleast see which part of the DOM you need to be looking at - you can get a plugin for firebug which shows any jQuery events bound to DOM elements called firequery, and I think firebug on its own can show attached events in normal JS.

Considering that firebug is written in JS, there obviously must be a way to do it. Unfortunately I don't have time to go through the source myself (I'd like to :D ) but you can find the repo here: http://code.google.com/p/fbug/source/browse/branches/firebug1.8/content/firebug/

Sorry I can't be of more help and good luck

It is not about whether you can help, it never was. It is all about how much you care. Thanks a lot for your reply. — EMM, Jul 28 '11 at 09:05

EMM · Answer 3 · 2011-09-27T03:48:21.140

1

Though It looks weird to answer my own question but may be it will help some one :

I did some research and found that: document.forms[i].elements[j].onclick will return

function onclick()
{
    login()
}

Here is the method which I was calling onClick of the button
similarly we can check many others like:

document.forms[i].elements[j].onblur
document.forms[i].elements[j].onfocus etc. etc.

Many thanks to all for taking interest in this question.

edited Sep 27 '11 at 03:48

answered Sep 26 '11 at 09:16

EMM

1,812
8
36
58

This answer is what I was looking for in my particular case, otherwise Chris's answer is the one I would like to ahead with.+1 to Chris. – EMM Sep 26 '11 at 09:19

score 0 · Answer 4 · answered Jul 28 '11 at 08:23

There is a very good tool visual event that would display all the events associated with element visually.

Add the following code at the end of each page that you want to monitor.

This will make the page disable and highlight all the events with icons and also show what they are doing by taking the cursor on that icon.

(function()
{
    if(typeof VisualEvent!='undefined')
    {
        if(document.getElementById('Event_display'))
        {
            VisualEvent.fnClose();
        }else{
            VisualEvent.fnInit();
        }
    }else
    {
        var n=document.createElement('script');
        n.setAttribute('language','JavaScript');
        n.setAttribute('src','http://www.sprymedia.co.uk/design/event/media/js/event-loader.js');
        document.body.appendChild(n);
    }
})();

Please read visual event for detail.

There is a shortcut of using this code: open your page and copy-paste the code on the Address bar like `javascript:code` — Talha Ahmed Khan, Jul 28 '11 at 08:25

How to get Events associated with DOM elements?

4 Answers4

Linked