Using the IE4 event Object | Inside JavaScript

Using the IE4+ event Object

Unlike the Netscape Navigator 4.0 event model, where events move down to their intended target from the top of the object hierarchy, events in the Internet Explorer move up from their target in a process called bubbling .

Here's an example that shows how bubbling works. In this case, I'll attach event handlers to the button , form , body , <HTML> , and document objects to handle onclick events. When you click the button in this example, you'll see alert boxes showing how the event is bubbling up the object hierarchy, from the button all the way up to the document object. Here's the code:

(Listing 15-14.html on the web site)

 <HTML ONCLICK="alert('HTML element level')">      <HEAD>          <TITLE>Event Bubbling</TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--             document.onclick = documentLevel              function documentLevel()              {                  alert("document level")              }              function bodyLevel()              {                  alert("body level")              }              //-->          </SCRIPT>      </HEAD>      <BODY ONCLICK="alert('body level')">           <H1>Event Bubbling</H1>          <FORM ONCLICK="alert('form level')">              <INPUT TYPE="BUTTON" VALUE="Click Me!" ONCLICK="alert('button level')">          </FORM>      </BODY>  </HTML>

You can see the results of this code in Figure 15.12. When you click the button, you can watch the click event bubble up through the button, form, body, <HTML> element, and document levels.

Figure 15.12. Event bubbling.

graphics/15fig12.gif

Tip

You can cancel event bubbling with the event object's cancelBubble property. See Table 15.6.