↑
Main Page

DOM-compliant browsers

var oTextbox = document.getElementById(“txt1”);

oTextbox.value += “\n>” + oEvent.type;

oTextbox.value += “\n target is “ + oEvent.target.tagName;

if (oEvent.relatedTarget) {

oTextbox.value += “\n relatedTarget is “

+ oEvent.relatedTarget.tagName;

}

</script>

</head>

<body>

<p>Use your mouse to click and double click the red square.</p>

<div style=”width: 100px; height: 100px; background-color: red”

id=”div1”></div>

</body>

</html>

This example works in all DOM-compliant browsers as well as those that are IE-compliant, making use

of the

target

and

relatedTarget

attributes of the newly formatted event object.

Summary

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

event

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

event

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

event

object and add/remove event handlers with-

out the need for browser detection.

301

All about Events

12_579088 ch09.qxd 3/28/05 11:39 AM Page 301