Inside Technique : The Ins and Outs of Mouse Events
By Scott Isaacs

One of the most well known Internet Explorer DHTML events, onmouseover and onmouseout, is also one of the most misunderstood. In this article we help explain these mouse events. We also introduce the new IE 5.5 onmouseenter and onmouseleave events and explain why these new events are not necessary.

The onmouseover and onmouseout events occur whenever the mouse enters or leaves any element on page. As with most DHTML events, the onmouseover and onmouseout event bubbles. The easiest way to understand this is to try our simple demonstration below.

Demo requires IE4 or later

This demonstration was created with the simple HTML below. We hooked the onmouseover, onmouseout, onmouseenter, and onmouseleave events on the span element to demonstrate the differences between the events. Unless you are running IE 5.5 or later, the text area tracking the onmouseenter and onmouseleave will stay empty as the event is not supported in your browser version.

<SPAN 
 ONMOUSEOVER="doCheckOver(this)" 
 ONMOUSEOUT="doCheckOut(this)" 
 ONMOUSEENTER="enterCount.value+=event.type + ':' 
     + event.srcElement.tagName + '\n'" 
 ONMOUSELEAVE="enterCount.value+=event.type + ':' 
     + event.srcElement.tagName + '\n'">
Span
<B>Bold
<EM>Italic
<U>Underline
</U>
</EM>
</B>
End Span
</SPAN>

We are simply outputting outputting when each of the four events are fired. The onmouseover and onmouseout events occurs whenever the mouse moves over an element or any contained element. For example, if the mouse moves over the word underline the onmouseover event occurs on the U, EM, B, SPAN elements (and so on). This event bubbling makes things tricky for rollover type effects. If the user moves the mouse left to right over each word above, onmouseover and onmouseout events will fire numerous times on the containing SPAN element. If you are changing styles in response to these events you will be unecessarily changing the elements appearance many times. unnecessarilly

When DHTML events were created this complexity was understood and resolved by introducing a contains method on each element. This method can be used to quickly determine if the mouse first entered or leaved the element. By using a simple if-then test, you can quickly determine if the user has entered or leaved the element. We use this simple test for doing the "Smart MouseOver/Out" above. We implement this test as follows:

function doCheckOver(el) {
	if (!el.contains(event.fromElement))
		// MouseEnter
}

function doCheckOut(el) {
	if (!el.contains(event.toElement))
		// MouseLeave

}

Unfortunately, most web developers don't understand or fail to perform this test properly. In IE 5.5, the onmouseenter and onmouseleave events were added and greatly simplify rollover effects. These events eliminate the need to write custom code to determine the first time the mouse enters or leaves the element. The onmouseenter event only occurs the first time the mouse moves anywhere within the scope of an element and does not bubble. Therefore, if the mouse moves over the word underline the onmouseenter event fires once on the U element. The onmouseenter event may occur on the containing elements only if the mouse has not already entered.

What does all this mean?

In general, whenever you create rollover effects using the mouseover and mouseout events you should add the simple test to simulate the new onmouseenter and onmouseleave events. This test also eliminates the need to ever use these two new events. The only exception is if you are only targeting IE 5.5 or later. Using these events will be more efficient than running the script on every mouseover and mouseout.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.