Identify the DOM element for a DOM event

Download source files - 0.6 KB

Sample Image - DomEventTargetDetection.jpg

Introduction

This script will give you an idea of how to identify which elements on your page fire a specific DOM event. For the purposes of this article, I will use the onmouseover event and display the element which fires it.

Capturing the window event

Before I show you a working example, I will quickly discuss how to identify a window event, which I have tested in IE and FF. I will comment under each to briefly explain.

document.onmouseover = function(e){
   var e = e || window.event;
   //notice that when assigning variables you can use 
   //the OR to differentiate between the methods each broswer accepts

   var target = e.target || e.srcElement;
   //now we have established the target which fired the event
}

Preparing for the working example

In the example I am going to give, I have used some more methods which I feel I should explain prior to writing the code.

In my example, I will go through all the elements in the document which have an HTML tag of div. What I will then do is write the id of the div element to a TextArea which I have named RESULTS. To achieve this, I must create an iteration:

for(i=0;i<document.getElementsByTagName('DIV').length;i++)
{
    // We will execute the code here
}

Inside this iteration, we need to reference the current div element which the iteration is up to. Below I will repeat the above code, but this time, I will say, "alert" the div element id.

for(i=0;i<document.getElementsByTagName('DIV').length;i++)
{
    alert(document.getElementsByTagName('DIV')[i].id);
}

The last part of the code I would like to briefly show is how I achieved the scroll behaviour of the RESULTS TextAarea. You will notice that it always scrolls down, upon extra content being added. I achieve this by saying the scrollTop is equal to the scrollHeight, thus keeping it at the bottom.

document.getElementById("RESULTS").scrollTop = 
         document.getElementById("RESULTS").scrollHeight

Bringing it all together

Basically, you will now see the following behaviour. You mouseover any of the eight div elements, and the id of that element is written into the text area.

window.onload=function()
{
    for(i=0;i<document.getElementsByTagName('DIV').length;i++)
    {
        document.getElementsByTagName('Div')[i].onmouseover = function(e)
        {
            var e = e || window.event;
            var target = e.target || e.srcElement;
            document.getElementById("Results").value += 
               "onmouseover fired for :" + target.id +"\n";
            document.getElementById("Results").scrollTop = 
               document.getElementById("Results").scrollHeight;
        }
    }
}

You will notice that I used window.onload instead of using the onload event in the body tag.

Taking it further

We can take this even further by:

Creating a function to handle each event.
Instruct the function to write out what event it was, by referencing the event type.

The function will be similar to what you see in the onmouseover function event code above, but this time, we can use this new function for any event, and you will see all of them firing, in the way that it will write out what is happening.

window.onload=function()
{
    for(i=0;i<document.getElementsByTagName('DIV').length;i++)
    {
        document.getElementsByTagName('Div')[i].onmouseover = function(e){WriteId(e);}
        document.getElementsByTagName('Div')[i].onmousedown = function(e){WriteId(e);}
        document.getElementsByTagName('Div')[i].onmouseout = function(e){WriteId(e);}
        document.getElementsByTagName('Div')[i].onclick = function(e){WriteId(e);}
        document.getElementsByTagName('Div')[i].onmouseup = function(e){WriteId(e);}
    }
}

function WriteId(e)
{
    var e = e || window.event;
    var target = e.target || e.srcElement;
    document.getElementById("Results").value += e.type +" fired for:"+ target.id +"\n";
    document.getElementById("Results").scrollTop = 
       document.getElementById("Results").scrollHeight;
}

This should just give you a basis, showing you when events fire, and each time they do, it will write out the event for you in the TextArea.

HTML elements which I have used for this example

As you will see in the source code for this, I have used the following HTML elements in the body of the page for this example.

<div id="item1">item1</div>
<div id="item2">item2</div>
<div id="item3">item3</div>
<div id="item4">item4</div>
<div id="item5">item5</div>
<div id="item6">item6</div>
<div id="item7">item7</div>
<div id="item8">item8</div>
<textarea id="Results" cols="40" rows="10"></textarea>