Event Bubbling Demo
This page is an example of event bubbling. The document, body & div1 all have a mouseout event handler that increments a counter at the bottom of the page every time they are fired.
Notice how events are triggered for every element above the element that you are actually moving the mouse away from and that moving the mouse from an element to one of it's children also fires a mouseout event. Div 2 has no event handlers at all, yet moving the mouse over it fires all 3 event handlers because Div 1 fires a mouseout that propogates all the way up to the document object. When you move the away from Div 2 all 3 handlers fire again because Div 2 fires a mouseout event that propogates up to the document object.
IE has the added difficulty in that it has issues working out what element the mouse is over when there is padding, margins or borders involved. In this example it treats the padding at the bottom of div1 as being part of the 'body' element. This is why moving the mouse into div2 from above fires all 3 handlers while moving into it from below fires only the body & document handlers. Because you seldom actually want to do anything on a mouseout from an element to one of its children this is rarely a problem.
| Document mouseout count : | |
| Body mouseout count : | |
| Div 1 mouseout count : |