↑
Main Page

Formatting the event object

}

};

function handleClick() {

alert(“Click!”);

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

EventUtil.removeEventHandler(oDiv, “click”, handleClick);

}

window.onload = function() {

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

EventUtil.addEventHandler(oDiv, “click”, handleClick);

}

</script>

</head>

<body>

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

100px”></div>

</body>

</html>

In this code, the

onload

event handler assigns an

onclick

event handler to the

<div/>

with the ID

“div1”

. When you click on the

<div/>

, you get the alert that says

“Click!”

, and then the event han-

dler is removed. Any time that you click the

<div/>

after that, there will be no alert.

Formatting the event object

One of the best ways to deal with the discrepancies between event objects in IE and the DOM is to make

them behave as similarly as possible. Because more browsers use the DOM event model, it only makes

sense to make the IE event model match the DOM event model more closely.

The following table is a comparison of DOM and IE

event

object properties and methods. Often, the

event objects and methods are capable of doing the same thing (such as blocking default behaviors), but

they are implemented in different ways. This table shows the IE way of doing some of the DOM behav-

iors. Although you cannot accurately copy all the properties into IE (such as

bubbles

cancelable

it is possible to come up with an equivalent method for most.

DOM Property/Method

IE Property/Method

altKey

bubbles

button

cancelBubble

cancelable

charCode

keyCode

clientX

294

Chapter 9

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