The Event instance

When an event handler is fired, an instance of an object named Event is passed to the handler as its first parameter in all standards-compliant browsers. Once again, the latter are Internet Explorer 9 and above, Firefox, Chrome, Safari, and Opera. Internet Explorer 8 and below do things in their own proprietary way by tacking the Event instance onto a global property (in other words, a property of window) named event. It’s worth noting that in order to preserve backward compatibility with older scripts, new versions of Internet Explorer still have a reference to the event in the window object. Not only that, but Microsoft has also kept its proprietary properties of the object, merging them with the standard ones. Notably, although Chrome was released long after the publication of the DOM Level 2, it adds a reference to the event in the window object and supports Internet Explorer’s properties as well.

In order to deal with this discrepancy, you’ll often see the following used as the first statement in a non-jQuery event handler:

if (!event) {
   event = window.event;
}

Those of you who are more experienced with JavaScript will know that you can reduce the previous code to a one-line statement:

event = event || window.event;

This levels the playing field by using feature detection (a concept we’ll explore in lesson 9) to check if the event parameter is passed and assigning the value of the window’s event property to it otherwise. After this statement, you can reference the event parameter regardless of how it was made available to the handler.

The properties of the Event instance provide a great deal of information regarding the event that has been fired and is currently being handled. This includes details such as which element the event was triggered on, the coordinates of mouse events, and which key was clicked for keyboard events.

But not so fast. If you’re dealing with older versions of Internet Explorer, not only do they use a proprietary means to get the Event instance to the handler, but they also use a proprietary definition of the Event object in place of the W3C-defined standard—you’re not out of the object-detection woods yet. With all these exceptions in place, you can understand how happy developers have been that new versions of Internet Explorer embraced W3C standards. Microsoft is not as evil as many think.

To give you an idea of these inconsistencies among browsers, let’s look at an example. To get a reference of the target element—the element on which the event was triggered—you must access the target property in standards-compliant browsers but the srcElement property in older versions of Internet Explorer. You deal with this inconsistency by employing feature detection with a statement such as the following:

var target = event.target || event.srcElement;

This statement tests whether event.target is defined and, if so, assigns its value to the local target variable; otherwise, it assigns the value of event.srcElement. You’ll be required to take similar steps for other Event properties of interest.

Up until this point, we’ve acted as if event handlers are pertinent only to the elements that serve as the trigger to an event, such as the image element of listing 6.1, but events propagate throughout the DOM tree. Let’s find out about that.