在JavaScript编程中，事件处理是页面交互的核心部分。在不同的浏览器环境下，事件处理方式和事件对象的属性可能会有所不同，这给跨浏览器开发带来了一定的挑战。本文将深入探讨IE和Firefox浏览器中event事件的兼容性问题。
1. **event对象的使用**
在IE浏览器中，事件处理函数可以直接访问到全局的`event`对象，而Firefox和其他遵循W3C标准的浏览器则不支持这种全局访问方式。为实现兼容，可以在事件处理函数中将event对象作为参数传递，如示例所示：
```html
<input type="button" value="clickMe" onclick="doIt(event)">
<script>
function doIt(oEvent){
alert(oEvent);
}
</script>
```
2. **event.srcElement vs. event.target**
IE浏览器使用`event.srcElement`来获取触发事件的元素，而Firefox则使用`event.target`。两者虽然大体相同，但`event.target`在某些情况下可能返回的是包含文本节点的父元素。在Firefox中，如果需要获取实际的HTML元素，需要通过循环检查节点类型来实现：
```javascript
function doIt(oEvent){
var Target = oEvent.target;
while(Target.nodeType != 1) {
Target = Target.parentNode;
}
alert(Target.tagName);
}
```
3. **键盘事件值的获取**
对于键盘事件，IE浏览器使用`event.keyCode`来获取按键的ASCII码，而Firefox则使用`event.which`。在兼容性代码中，可以统一使用`event.which`，因为它在所有现代浏览器中都可用：
```html
<input type="text" onkeypress="doIt(event)">
<script>
function doIt(oEvent){
alert(oEvent.which);
}
</script>
```
4. **鼠标位置的获取**
IE浏览器通过`event.x`和`event.y`获取鼠标点击的相对位置（相对于窗口），而Firefox则使用`event.pageX`和`event.pageY`（相对于文档）。为了兼容，需要自定义逻辑来计算绝对位置：
```javascript
function doIt(oEvent){
var pos = {x: 0, y: 0};
if (oEvent.pageX || oEvent.pageY) {
pos.x = oEvent.pageX;
pos.y = oEvent.pageY;
} else if (oEvent.clientX || oEvent.clientY) {
pos.x = oEvent.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
pos.y = oEvent.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
console.log("X: " + pos.x + ", Y: " + pos.y);
}
```
总结来说，IE和Firefox对event事件的处理存在显著差异，开发者在编写JavaScript代码时，需要考虑这些差异并编写兼容性的代码。通常，遵循W3C标准的写法（如传入事件对象到处理函数，使用`event.target`和`event.which`）能提供更好的跨浏览器兼容性。同时，利用条件判断或库（如jQuery）可以简化这类兼容性问题的处理。
