javascript - Why the subtle cross-browser differences in Event Object - Stack Overflow

admin管理员组

文章数量:1345016

The following declaration at the window level:

    var event; // for IE
    var event = "anything"; // for Chrome

will destroy the event object as used here:

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

Firefox does not seem phased by either declaration.

I realize that declaring a variable with the name "event" is bad code but I am curious about the technical difference here, e.g. that the use of var in IE reinitializes the variable to null, whereas Chrome will not overwrite with a var declaration unless a value is explicitly assigned, and maybe FF holds the event object outside of the window's var declaration scope altogether.

This is more of a curiosity. I ran into a bug in IE on a site outside of my control that was caused by this and the more I looked into the more I saw subtle differences between browsers. Just wondering if anyone had any insights here.

The following declaration at the window level:

    var event; // for IE
    var event = "anything"; // for Chrome

will destroy the event object as used here:

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

Firefox does not seem phased by either declaration.

I realize that declaring a variable with the name "event" is bad code but I am curious about the technical difference here, e.g. that the use of var in IE reinitializes the variable to null, whereas Chrome will not overwrite with a var declaration unless a value is explicitly assigned, and maybe FF holds the event object outside of the window's var declaration scope altogether.

This is more of a curiosity. I ran into a bug in IE on a site outside of my control that was caused by this and the more I looked into the more I saw subtle differences between browsers. Just wondering if anyone had any insights here.

• javascript
• dom
• events
• cross-browser
• dom-events

Share Improve this question Follow edited Sep 23, 2019 at 20:18 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Feb 3, 2010 at 23:24 johnmdonahuejohnmdonahue 65377 silver badges1616 bronze badges 4

• 3 What kind of answer are you looking for? It all boils to down to just different browser vendors have different and inconsistent DOM APIs and rendering engines. – meder omuraliev Commented Feb 3, 2010 at 23:27
• Tim Down's reply answers my question - thanks! – johnmdonahue Commented Feb 3, 2010 at 23:50
• If his answer answered your question, you should mark it as the correct answer so he gets the points and credit – Gordon Tucker Commented Feb 4, 2010 at 0:24
• Thanks Gordon. Still getting the lay of the land here. – johnmdonahue Commented Feb 4, 2010 at 0:31

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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

<div onmouseover="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).

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.

本文标签： javascriptWhy the subtle crossbrowser differences in Event ObjectStack Overflow