In IE4, the event bubbles up from the event generating element to the window.

  1. User action or conditions occur such that the browser can recognize an event occurrence.
  2. The event object is instantly updated.
  3. The event fires. The bubbling up begins.
    1. Primary event handler code may handle the event at the source tag level (see Registering Events). If there is no primary event handler code, the event bubbles up automatically. 
    2. Secondary event handler code may handle the event further up the DOM hierarchy until bubbling is canceled (by setting window.event.cancelBubble = true) or the window object is reached.

This is easier than in NN4 since all events bubble up automatically.

This example shows how the <b> tag bubbles up an event to its parent tag (<p>):

<p onclick="alert('p!')">
    The quick
        <b onclick="alert('b!')">brown</b>
    fox.
</p>

The quick brown fox.

In this example, the event handlers codes for the paragraphs should cancelBubble, otherwise the event handler code for the outer most div will receive the bubbled up onmouseout event from each paragraph and hide the FAQ all together.

<div onmouseover="showFAQ()" onmouseout="hideFAQ()">
    FAQ
    <div id="FAQ" style="display:none">
        <p style="display:none"
           onmouseover="showAns(1)"
           onmouseout="hideAns(1)">
                Q1: What color is your fire engine? </p>
        <p id="Ans1">A1: Red.</p>

        <p style="display:none"
           onmouseover="showAns(2)"
           onmouseout="hideAns(2)">
                Q1: What color is your banana?</p>
        <p id="Ans2">A2: Yellow.</p>
    </div>
</div>

Page Modified: (Hand noted: 2007-08-28 17:28:15Z) (Auto noted: 2010-12-24 22:47:54Z)