Event Delegation and MSIE

in a recent post handgestrickt described the problems that the Internet Explorer makes, when two events that are delegated by one parent are fired very near in the timeline. this happens because the Event-Handlers for the onmouseout-behaviour are strictly fired, even if the onmouseout has the opposite effect. for example you have a plane. this plane is cut into tiles. every tile marks the whole plane with a border. when you leave one tile and go to the other, the border flickers or blinks for a moment, because onmouseout is fired, then onmouseover is fired. example code for Internet Explorer:

flickers or blinks in Internet Explorer:

<div id="delegation" onmouseover="$('delegation').style.border = '1px solid red';" onmouseout="$('delegation').style.border = 'none';">
 <div class="tile"></div>
 <div class="tile"></div>
 <div class="tile"></div>
 <div class="tile"></div>
 <!--...more tiles-->
</div>

the trick we found: the Internet Explorer provides the 2 non standard Event-Handlers onmouseenter and onmouseleave. the exact description given by Microsoft is:

onmouseenter:

"The event fires only if the mouse pointer is outside the boundaries of the object and the user moves the mouse pointer inside the boundaries of the object. If the mouse pointer is currently inside the boundaries of the object, for the event to fire, the user must move the mouse pointer outside the boundaries of the object and then back inside the boundaries of the object.

Unlike the onmouseover event, the onmouseenter event does not bubble. In other words, the onmouseenter event does not fire when the user moves the mouse pointer over elements contained by the object, whereas onmouseover does fire."

onmouseleave:

"The event fires only if the mouse pointer is inside the boundaries of the object and the user moves the mouse pointer outside the boundaries of the object. If the mouse pointer is currently outside the boundaries of the object, for the event to fire, the user must move the mouse pointer inside the boundaries of the object and then back outside the boundaries of the object."

does not flicker or blink in Internet Explorer:

<div id="delegation" onmouseenter="$('delegation').style.border = '1px solid red';" onmouseleave="$('delegation').style.border = 'none';">
 <div class="tile"></div>
 <div class="tile"></div>
 <div class="tile"></div>
 <div class="tile"></div>
 <!--...more tiles-->
</div>

great! in our opinions this Event-model makes more sense. even our opinions about Internet Explorer are mixed. this is really a clean and logical thing!

related:
earlier post on 20. March 2007
onmouseenter Event-Handler
onmouseleave Event-Handler