为什么事件对象中存在细微的跨浏览器差异答案

【问题标题】：Why the subtle cross-browser differences in Event Object为什么事件对象中存在细微的跨浏览器差异
【发布时间】：2010-02-03 23:24:33
【问题描述】：

以下窗口级别的声明：

变种事件； // 对于 IE var event = "任何东西"; // 对于 Chrome

将销毁此处使用的事件对象：

鼠标悬停分区

Firefox 似乎没有被这两种声明分阶段。

我意识到声明一个名为“event”的变量是错误的代码，但我很好奇这里的技术差异，例如在 IE 中使用 var 会将变量重新初始化为 null，而 Chrome 不会用 var 声明覆盖，除非显式分配值，并且可能 FF 将事件对象完全保存在窗口的 var 声明范围之外。

这更像是一种好奇心。我在一个不受我控制的网站上的 IE 中遇到了一个错误，这是由此引起的，我研究得越多，我发现浏览器之间的细微差别就越多。只是想知道是否有人对此有任何见解。

【问题讨论】：

您在寻找什么样的答案？这一切都归结为不同的浏览器供应商拥有不同且不一致的 DOM API 和渲染引擎。
Tim Down 的回复回答了我的问题 - 谢谢！
如果他的回答回答了您的问题，您应该将其标记为正确答案，以便他获得积分和信用
谢谢戈登。仍然在这里了解情况。

标签： javascript dom events cross-browser dom-events

【解决方案1】：

在 IE 中，event 是 window 对象的属性，用于事件处理函数中以访问正在处理的事件。在其他浏览器（例如 Firefox）中，情况是在事件处理程序属性中，调用该属性内的 JavaScript 代码，就好像它形成了一个函数的主体，该函数已向其中传递了一个名为 event 的参数，该参数对应于事件被处理。所以在

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

鼠标悬停代码是有效的

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

并且event 参数覆盖在包含范围内声明的任何event，而在 IE 中，它是

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

并且event 标识符被解析为全局对象的属性（即window）。

【讨论】：

感谢蒂姆的解释——这很有意义。那么 Chrome 是否处理类似于 IE 的事件对象呢？它似乎失败了：var event = null;。但这似乎在整个 WebKit 中并非如此，因为 Safari 似乎可以很好地处理它。
我还不确定，因此我对“其他浏览器，例如 Firefox”这个词的表述含糊不清。从你说的情况来看，Chrome的机制似乎与IE的相似，但我会做一些研究。
似乎几乎可以肯定 Chrome 的工作方式与 IE 相同：在事件处理程序属性中，window.event === event 返回 true 并设置一个名为 event 的全局变量会破坏事情，因为全局object 是 JavaScript 在尝试解析标识符时检查的最后一件事。 Safari 4 中的情况很奇怪：window.event === event 返回 true 但定义一个 event 全局变量不会覆盖事件处理程序中 event 的值，所以我得出的结论是 Safari 都在设置 window.event并传入与event 参数相同的对象。
谢谢蒂姆。感谢您在这里解释您的方法。

【解决方案2】：

IE中的“事件”对象是“窗口”对象的一个属性；也就是说，它是全球性的。在 Firefox 中，它是一个构造并传递给事件处理程序的值。

如果您使用 jQuery 或其他框架，通常事件处理支持会将“事件”对象标准化为跨浏览器工作相同的对象。

【讨论】：

感谢有关框架规范化事件对象的附加信息。很好的洞察力。
如果你喜欢你得到的答案，你应该给他们投票。这就是 StackOverflow 为每个人工作的方式！
感谢 Pointy，我是新来的，还没有获得所需的 15 分。但我一定会这样做的。
Pointy :so ，在 IE 中事件是全局的，所以所有 foo's 像 onclick='foo()' 函数都将通过 window.event 知道事件，而 FF 将 event 发送到包装函数所以我将不得不使用onclick='foo(event)'，所以最终我将拥有function (event){foo(event);}（与chrome相同）......我说得对吗？
@RoyiNamir 嗯，传统的“hack”就是将“event”声明为handler函数的参数，然后写event = event || window.event;作为函数的第一条语句。