Main Page

DOM-compliant browsers

var oTextbox = document.getElementById(“txt1”);
oTextbox.value += “\n>” + oEvent.type;
oTextbox.value += “\n target is “ +;
if (oEvent.relatedTarget) {
oTextbox.value += “\n relatedTarget is “
+ oEvent.relatedTarget.tagName;
<p>Use your mouse to click and double click the red square.</p>
<div style=”width: 100px; height: 100px; background-color: red”
<p><textarea id=”txt1” rows=”15” cols=”50”></textarea></p>
This example works in all DOM-compliant browsers as well as those that are IE-compliant, making use
of the
attributes of the newly formatted event object.
This chapter introduced the concept of events in JavaScript. You learned the difference between an
event, which is the occurrence of an action, and an event handler, which is a function assigned to execute
when an event occurs. You learned about the different ways to assign event handlers as well as the dif-
ferent methods used by Internet Explorer and the DOM standard for assigning multiple event handlers
to the same event.
The concept of event flow was introduced in this chapter and the two different event flows, bubbling
and capturing, were explained.
You then explored the
object, which is used to give the developer information about a particular
event. The chapter showed you how Internet Explorer and the DOM each support different
objects. You also learned the different categories of events: mouse events, keyboard events, HTML
events, and mutation events.
The last section of the chapter walked you through the creation of a cross-browser library for events,
enabling you to use one set of methods to access the
object and add/remove event handlers with-
out the need for browser detection.
All about Events
12_579088 ch09.qxd 3/28/05 11:39 AM Page 301

JavaScript EditorFree JavaScript Editor     Ajax Editor