在JavaScript的事件处理机制中，不同的浏览器有不同的实现方式，尤其是IE和Firefox。本文主要讨论了在Firefox中如何处理事件，特别是在使用`onclick=foo()`这种形式时遇到的问题及其解决方案。
在Internet Explorer（IE）中，事件对象是作为全局变量`window.event`来保存和维护的。这意味着无论何时有事件发生，`window.event`都会被更新，因此你可以通过`window.event`访问到当前事件的相关信息，例如触发事件的元素可以通过`event.srcElement`获取。
然而，在Firefox（以及大部分遵循W3C标准的现代浏览器）中，事件对象不会像IE那样作为全局变量存在。相反，它会在事件处理函数被调用时作为参数传递给该函数。例如，如果你有一个事件处理函数`foo(e)`，那么在Firefox中，`e`就是事件对象，你可以通过`e.target`来获取触发事件的元素。
下面是一些示例代码，展示了IE和Firefox中事件处理的不同之处：
```html
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
<script>
window.onload = function() {
document.getElementById("btn1").onclick = foo1;
document.getElementById("btn2").onclick = foo2;
document.getElementById("btn3").onclick = foo3;
}
function foo1() {
// IE: 显示 "[object]"
// FF: 显示 "undefined"
alert(window.event);
// IE: 显示 "undefined"
// FF: 显示 "[object]"
alert(arguments[0]);
}
function foo2(e) {
// IE: 显示 "[object]"
// FF: 显示 "undefined"
alert(window.event);
// IE: 显示 "undefined"
// FF: 显示 "[object]"
alert(e);
}
function foo3() {
// 兼容IE和FF的写法
alert(arguments[0] || window.event);
var evt = arguments[0] || window.event;
var element = evt.srcElement || evt.target;
alert(element.id); // 显示 "btn3"
}
</script>
```
当使用`onclick="foo()"`这种方式直接在HTML中绑定事件时，Firefox不会自动将事件对象作为参数传递给`foo()`函数，导致在Firefox中`arguments[0]`为`undefined`。而如果通过`btn.onclick=foo`这样的JavaScript代码来绑定事件，Firefox则会传递事件对象。
解决这个问题有以下两种方法：
1. **显式传递事件对象**：
修改HTML，如`<button id="btn" onclick="foo(event)">按钮</button>`，然后在`foo`函数中处理`event`参数。
2. **自动查找事件对象**：
可以创建一个通用的事件处理函数，如`function handleEvent(e) { /* ... */ }`，然后在该函数内部检查`arguments[0]`和`window.event`，以确定哪个是可用的事件对象。
```html
<button id="btn" onclick="handleEvent()">按钮</button>
<script>
function handleEvent(e) {
var event = e || window.event;
var element = event.srcElement || event.target;
// 使用 event 和 element 继续处理事件
}
</script>
```
通过这样的方式，你可以编写跨浏览器的事件处理代码，确保在Firefox和IE中都能正确地获取和使用事件对象。在实际开发中，通常会使用库或框架（如jQuery、React等）来进一步抽象这些差异，提供统一的API来处理事件。
