Bubble Power: Event Handling in Internet Explorer 4.0

Michael Wallent
Lead Program Manager
Microsoft Corporation

July 15, 1997
Updated: September 30, 1997

The following article was originally published in Site Builder Magazine (now known as MSDN Online Voices).

Web authors can create exciting, interactive pages by adding special code to make those pages respond to user-initiated interactions. Clicking a button, moving the mouse over part of the screen, selecting some text -- these actions all fire events for which a Web author can write special code that will run in response to the event. This code is generally known as an event handler.

Event handling is not new with Microsoft Internet Explorer 4.0 - Internet Explorer 3.x, Netscape Navigator, and Communicator all handle events as well. However, in Internet Explorer 4.0, the HTML elements on a Web page that are the source of the events, and the types of events that are generated, have been greatly expanded. Previously, only a small set of HTML elements could generate events: Anchors, Image Maps, Form Elements, Applets, and Objects. With Internet Explorer 4.0, every HTML element on the page can be the source for a full set of mouse and keyboard events.

Here is a set of common events that every HTML element generates in Internet Explorer 4.0:

Mouse event	Generated when the user
onmouseover	Moves the mouse pointer over (that is, enters) an element.
onmouseout	Moves the mouse off an element.
onmousedown	Presses any of the mouse buttons.
onmouseup	Releases any of the mouse buttons.
onmousemove	Moves the mouse pointer over an element.
onclick	The user clicks the left mouse button on an element.
ondblclick	The user double-clicks the left mouse button on an element.
Keyboard event	Generated when the user
onkeypress	Presses and releases a key (full down-and-up cycle). However, if a key is held down, multiple onkeypress events will be fired.
onkeydown	Presses a key. Only a single event will be fired, even if the key is held down.
onkeyup	Releases a key.

To help authors build code that is more compact, simpler, and easier to maintain, Internet Explorer 4.0 introduces a new way to handle events -- event bubbling. Before we take too much credit for this innovation in HTML, we have a confession: We didn't invent event bubbling; Windows, OS/2, OSF Motif, and almost every other GUI platform uses this technique. Event bubbling is, hoever, new to HTML.

Previously, if an HTML element generated an event but no event handler was registered for it, the event would just vaporize, never to be seen again. Event bubbling simply passes these unhandled events to the parent element for handling. The event continues up ("bubbles up") the element hierarchy until it is handled, or until it reaches the topmost object, the document.

Event bubbling is useful because

It allows multiple common actions to be handled centrally.
It reduces the amount of overall code in the Web page.
It reduces the number of code changes necessitated by changes in the document.

Simple Example

<html>
<body>
<div id=OuterDiv style="background-color: red"

onmouseover="alert(window.event.srcElement.id);">
This is some text
<img id=InnerImg>
</div>
</body>
</html>

On this Web page, when the user moves the mouse pointer over the text "This is some text," a dialog appears with the text "OuterDiv." If the mouse then moves over the image, another dialog appears with the text "InnerImg."

The interesting thing here is that the onmouseover event for the image (IMG element) was handled even though it does not have an event handler. Why is this? The onmouseover event from the IMG element bubbles up to its parent element, which is the DIV element. DIV does have an event handler registered for the onmouseover event, so it fires.

Every time an event is fired, a special property on the window object is created. This special property contains the event object. The event object contains context information about the event that just fired, including mouse location, keyboard status, and (most importantly) the source element of the event.

The source element is the element that caused the event to fire and can be accessed using the srcElement property on the window.event object.

In the example above, the dialog displays the id property of the event's srcElement.

Another Example: Handling Rollover Effects

Now that we've seen how easy it is to use event bubbling, let's apply it to create rollover effects. A Web author creates a rollover effect to make part of a page react when the user moves the mouse over it. With Internet Explorer 4.0, the process of creating a rollover effect is greatly simplified.

<html>
<head>
<style>
.Item {
   cursor: hand;
   font-family: verdana;
   font-size: 20;
   font-style: normal;
   background-color: blue;
   color: white
 }
.Highlight {
   cursor: hand;
   font-family: verdana;
   font-size: 20;
   font-style: italic;
   background-color: white;
   color: blue
 }
</style>
</head>
<body>
<span class=Item>Milk</span>
<span class=Item>Cookies</span>
<span class=Item>Eggs</span>
<span class=Item>Ham</span>
<span class=Item>Cheese</span>
<span class=Item>Pasta</span>
<span class=Item>Chicken</span>

<script>
function rollon() {
  if (window.event.srcElement.className == "Item") {
     window.event.srcElement.className = "Highlight";
  }
}

document.onmouseover = rollon;

function rolloff() {
  if (window.event.srcElement.className == "Highlight") {
     window.event.srcElement.className = "Item";
  }
}

document.onmouseout = rolloff;
</script>
</body>
</html>

In this example, we have seven SPAN elements, initially set to use the class Item. When the mouse moves over any one of those elements, it will be changed to use the class Highlight.

Innovations in Internet Explorer 4.0 enable the following:

Events can now be generated from a SPAN element. Previously, an HTML author would have had to wrap each SPAN in an anchor to get the right events.
With event bubbling, events can be captured at the document level. You do not need to create separate event handlers for each element that will participate in the effect. For example, should the author add HTML to the page, these additional elements would participate in the event model without changing a single line of script. Note that the document object is the "super parent" for all elements in the document body.

Canceling Events

All events bubble to their parent element (and recursively all the way up to the document object) unless the event is canceled. To cancel an event, you must set the window.event.cancelBubble property to true in the event handler.

Canceling event bubbling should not be confused with canceling the default action for the event. Some events (for example, the onclick event on an anchor) have a default action. When an anchor is clicked, its default action is to navigate the current window to the URL specified in the src property. Returning false from an event handler, or setting window.event.returnValue to false, cancels the default action but does not cancel event bubbling unless window.event.cancelBubble is set, too. Conversely, canceling the bubble of an event doesn't cancel its default action.

In the last example, we saw how you could use event bubbling to apply a common effect to a set of elements. What if you wanted to exclude an element from that effect?

Simply change the line:

<span class=Item>Ham</span>

to:

<span class=Item
 onmouseover="window.event.cancelBubble = true;"
 
onmouseout="window.event.cancelBubble = true;">
 Ham</span>

Now, no matter how many times you move your mouse over "Ham," it will not change style. This is because we cancelled both the onmouseover and onmouseout events; they did not bubble through to the document, so the document was never given the opportunity to handle those events for "Ham."

Special Considerations

At any one time, you can have an onmouseover event only on a single object. This means that in the following case:

<DIV id=MyDiv>
<IMG id=MyImg>
</DIV>

if you were to move your mouse over theIMG, the order of events would be as follows:

MyDiv:: onmouseover
MyDiv:: onmouseout
MyImg:: onmouseover

At times, the author may want to detect when the mouse moves outside a DIV to perform some special effect. It is not enough to simply trap the onmouseout event. To make this easier, Internet Explorer 4.0 indicates the source element (fromElement) and target element (toElement) for the onmouseover and onmouseout events. You can use these properties in combination with the contains() method to tell when the mouse has moved outside of a region.

The following example shows the use of these properties and methods.

<html>
<body id=Body>
<div id=OuterDiv style="width: 100px; height: 50px; background: red" 
onmouseover="over();" onmouseout="out();">
<img id=Img1>
<img id=Img2>
<img id=Img3>
</div>
<script>
function over() {
  var s;
  s = "onmouseover: "+window.event.srcElement.id+" from: "+
    window.event.fromElement.id+" to: "+window.event.toElement.id;
  alert(s);
}

function out() {
  var s;
  s = "onmouseout: "+window.event.srcElement.id+" from: "+
    window.event.fromElement.id+" to: "+window.event.toElement.id;
  alert(s);

  if (!(OuterDiv.contains(window.event.toElement))) {
     alert("Out Now");
  }
}
</script>

</body>
</html>

Summary

HTML authors can create powerful, easy-to-maintain pages with a very small amount of code by using event bubbling and taking advantage of Internet Explorer's ability to generate events on all HTML elements.

For more information on authoring and developing for Internet Explorer 4.0, see the Dynamic HTML overview.

Michael Wallent is Microsoft's lead program manager for Dynamic HTML.