Event Model Woes
there are several ways to design an Event Handling model. recently handgestrickt is writing a big application, where a lot of Event Handlers are set. in such a scenario strange things can happen and are often misunderstood as bugs. we want to clarify, why the Internet Explorer Event Model, even it "feels" buggy, is the one that is strict. for the fully understanding we take a real world example:
we have several square layers, which have several tiles inside. the tiles in each square layer "fire" the same Events onmouseover and onmouseout. onmouseover the square layer gets a 1 pixel wide, solid, red border and onmouseout the border is deleted. when you take the mouse pointer and go over the square layer, you can see different behaviours in different browsers. in Firefox and Opera the border around the square layer stays solid, whereas in Internet Explorer it flickers, when you pass the tiles edges. interesting!
the Internet Explorer model:
this model is strict. everytime you pass the edges, the onmouseout is "fired", 0.00003 milliseconds later the onmouseover of the new element is "fired". both events execute their callbacks. this is the absolutely right behaviour! but unfortunately in our example, as in many real world examples, it leads into unwanted results: flickering.
this model is tolerant. everytime the onmouseout and onmouseover are "fired" very near in the timeline, and the onmouseout-elements onmouseover is the same as the new elements onmouseover, both events are just "forgotten" and nothing is done. if you see it from the strict point of view, this behaviour is wrong. but many webdevelopers around the world are happy that things are like this.
the solution:
the only solution is, that in Internet Explorer you have to change the way things work. you need to delete the onmouseout events and clean things up, when a new elements onmouseover is "fired". Additonally you need to track, whether the body of the document has an onmouseover and also clean things up. in our example this means. everytime a tiles onmouseover is "fired", all the borders of the other parent square-elements have to be deleted. additionally if the mouse pointer is not inside a square element, but over the body of the page, all borders have to be deleted.
it is not a bug, it is just pedantic!
