↑
Main Page

DOM event model

A unique feature of the DOM event model is that text nodes fire events as well (this is not so in Internet

Explorer). So if you click the text

Click Me

in the example, the event flow actually looks like Figure 9-6.

Figure 9-6

This is an important concept when you are working with DOM-compliant browsers. Forgetting that text

nodes fire events in the DOM is the number one reason why developers get headaches working with

newer browsers.

Event Handlers/Listeners

Events are certain actions performed either by the user or by the browser itself. These events have names

click

load

, and

mouseover

. A function that is called in response to an event is called an

event handler

(or,

as the DOM describes it, an

event listener

). A function responding to a

click

event is considered an

onclick

event handler. Traditionally, event handlers are assigned in one of two ways: in JavaScript or in HTML.

To assign an event handler in JavaScript, you have to get a reference to the object in question and then

assign a function to the corresponding event handler property like this:

var oDiv = document.getElementById(“div1”);

oDiv.onclick = function () {

alert(“I was clicked”);

};

div

body

(text) 6

bubbling phase

document 9

window

window 10

capturing phase

266

Chapter 9

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