CSS/HTML: Retrieving ELement Under the Mouse

CSS: RETRIEVING THE ELEMENT UNDER THE MOUSE

The process of getting the element under the mouse is currently is currently browser dependent. This method (or, more precisely: the examples) has been tested with Firefox 1, Netscape 6.2, and Netscape 7, and Internet Explorer 6 on Windows XP.

Steps that need to be done:

Write an event handler (a function) to handle mouse events.
Assign the function to intercept the desired mouse event(s).
Retrieve the element from within the event handler. When a mouse event is fired, the element which fires the event will be one of the member of the event handler parameter.

Writing a mouse event handler function.
A mouse event handler function will be called whenever a certain mouse event is happening. There are several kind of mouse events, such as mouse move (onMouseMove), mouse over (onMouseOver), mouse downs (onMouseDown), or mouse out (onMouseOut), among others. All the mouse events accepts an implicit object as a parameter. This parameter is an event object, which is passed implicitly to the event handler. Within this event object, there are some useful information, such as the mouse coordinates, and more importantly, the element which fired the event. So, we can write a generic event handler like this:

function mouseEventHandler(mEvent)
{
  // do something
}

Assigning the event handler function
Assigning an event handler allows us to 'intercept' certain events and do something as a response to the event. To assign the function as an event handler, simply assign the function to the desired mouse events.

Events are associated with elements. For example, <TABLE onMouseMove=....> will be fired when the mouse is moved over that TABLE element; and <TABLE onMouseOut=...> will be fired when the mouse is moving outside that TABLE's boundary.
In this example, I am assigning the function so that I can intercept mouse downs (onMouseDown) anywhere within the <BODY> element. This means that if you click on any element inside the <BODY>, the event handler will be executed.

<body onMouseDown="javaScript:mouseEventHandler(event);">

Note that you can assign the event handler to any valid elements.

Retrieving the element
As mentioned earlier, whenever an event is fired, an event object is passed implicitly to the event handler. Within this event object, there is a parameter. This parameter is a pointer to the element that fired the event. In Internet Explorer, this parameter is: event.target; while in Mozilla browsers (such as Netscape and Internet Explorer), it is: event.srcElement.

Once you have access to the element, there are many things that can be done with it. For starter, the sample code below prints the nodeName of the element (nodeName is the html tag of the element, such as "IMG", "TABLE", "INPUT", etc):

function mouseEventHandler(mEvent)
{
  // Internet Explorer
  if (mEvent.srcElement)
  {
    alert(mEvent.srcElement.nodeName);
  }
  // Netscape and Firefox
  else if (mEvent.target)
  {
    alert(mEvent.target.nodeName);
  }
}

Examples
This page itself is a bit more complex, and I recommend you look at this example first before trying to decipher this page.

Below are some more useful element properties.

element.nodeName	A string containing the tag of the element, such as "TABLE", "DIV", "IMG", etc.
element.parentNode	An element which is the parent node of the element. For example, if you have <TABLE><TR><TD>cell</TD></TR></TABLE>, the parent of <TD> is the <TR>; and the parent of the <TR> is <TABLE>.
element.firstChild	An element which is the first child node of the element.
element.id	A string, which is the ID of the element. (The ID must already be defined.)

So, there are many things that can be done with the element. For example, you can retrieve the element type, the id, and alter the style of the element, move it around, etc. Here's an example of altering element color.

As you might have already noticed, when you move your mouse over any element on this page, a popup bubble is displayed. The popup bubble shows the element type of the element currently under the mouse. It also shows the immediate parent node type. You can move the mouse over any of the elements below and observe the behavior.

Another example: Printing DOM Tree of the element under the mouse.

Test Area

A <TABLE> element contains table rows <TR>, table columns <TD>, and the table content, including text formatting <FONT>, <B>, <ITALIC>, etc.

Column 1

Column 2

Column 3

Column 4

Content 1A

Content 2A

Content 3A

Content 4A

Content 1B