Why The Subtle Cross-browser Differences In Event Object

The following declaration at the window level: var event; // for IE var event = 'anything'; // for Chrome will destroy the event object as used here:

Solution 1:

In IE, event is a property of the window object and is used in event handlers functions to access the event being handled. In other browsers such as Firefox, the situation is that in an event handler attribute, the JavaScript code inside the attribute is called as though it forms the body of a function into which has been passed a parameter called event that corresponds to the event being handled. So in

<divonmouseover="alert(event.type);">Mouseover Div</div>

the mouseover code is effectively

function(event) {
    alert(event.type);
}

and the event parameter overrides any event declared in a containing scope, whereas in IE, it's

function() {
    alert(event.type);
}

and the event identifier is resolved as a property of the global object (i.e. window).

Solution 2:

The "event" object in IE is a property of the "window" object; that is, it's global. In Firefox, it's a value constructed and passed in to event handlers.

If you use jQuery or some other framework, usually the event handling support will normalize the "event" object into something that works identically across browsers.

Share