Professional JavaScript For Web Developers

Chapter 9
One important difference in direct assignment is that subsequent assignments to the event handler wipe
out the previous assignment:
oDiv.onclick = fnClick;
oDiv.onclick = fnDifferentClick;
In this example, fnClick is assigned as the onclick event handler first, but is then replaced by
fnDifferentClick.
The Event Object
Developers for both browsers knew that it was important to pass information about an event to the
developer. The result was to create an event object that contained information specific to the event that
had just occurred such as:
❑
❑
❑
The object that caused the event
Information about the mouse at the time of the event
Information about the keyboard at the time of the event
Event objects are only created when an event occurs and are made accessible to the event handlers. After
all event handlers have been executed, the event object is destroyed.
As you can probably guess, Internet Explorer and the DOM implement the event object in two
different ways.
Locating
In Internet Explorer, the event object is a property of the window object. This means that an event handler
must access the event object in this way:
oDiv.onclick = function () {
var oEvent = window.event;
}
Even though it is a property of the window object, the event object is only accessible when an event
occurs. After all event handlers have been executed, the event object is destroyed.
The DOM standard says that the event object must be passed in as the sole argument of the event handler.
So, to access the event object in a DOM-compliant browser (such as Mozilla, Safari, or Opera), you
do the following:
oDiv.onclick = function () {
var oEvent = arguments[0];
}
Of course, you can also name the argument for easier access:
270
oDiv.onclick = function (oEvent) {
}