一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子

下面是一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子的完整攻略。

介绍

随着Web技术的发展，Javascript在Web前端开发中扮演着越来越重要的角色。然而，不同的浏览器（如IE和Firefox等）对Javascript的支持程度不同，会导致一些兼容性问题。本攻略总结了一些常见的Javascript的IE和Firefox兼容性问题和解决方法。

问题与解决

问题一：事件模型不同

在Web前端开发中，常常需要对用户的交互操作做出反应，这时常使用Javascript中的事件模型来实现。但是，不同浏览器对事件模型的支持不同，主要表现在事件处理程序的注册方式上。

在IE中，事件处理程序的注册方式为：

element.attachEvent("on" + eventName, eventHandler);

在Firefox中，事件处理程序的注册方式为：

element.addEventListener(eventName, eventHandler, useCapture);

为了兼容不同浏览器，可以采用如下方式注册事件处理程序：

if (element.attachEvent){
  element.attachEvent("on" + eventName, eventHandler);
} else {
  element.addEventListener(eventName, eventHandler, useCapture);
}

示例一：鼠标滚轮事件

在IE中，鼠标滚轮事件的名称为"onmousewheel"，而在Firefox中，鼠标滚轮事件的名称为"DOMMouseScroll"。为了兼容不同浏览器，可以采用如下方式注册鼠标滚轮事件：

function handleMouseWheelEvent(event){
  var delta = 0;
  if (!event) event = window.event;
  if (event.wheelDelta) {
    delta = event.wheelDelta / 120;
  } else if (event.detail) {
    delta = -event.detail / 3;
  }
  // 处理滚轮事件
}

if (document.attachEvent) {
  document.attachEvent("onmousewheel", handleMouseWheelEvent);
} else if (document.addEventListener) {
  document.addEventListener("DOMMouseScroll", handleMouseWheelEvent, false);
}

问题二：XMLHttpRequest对象不同

在Web前端开发中，常常需要向后台发送请求获取数据，这时常使用XMLHttpRequest对象来实现。但是，不同浏览器对XMLHttpRequest对象的支持不同，主要表现在对象的创建方式上。

在IE中，可以使用如下方式创建XMLHttpRequest对象：

var xhr = new ActiveXObject("Microsoft.XMLHTTP");

在Firefox中，可以使用如下方式创建XMLHttpRequest对象：

var xhr = new XMLHttpRequest();

为了兼容不同浏览器，可以采用如下方式创建XMLHttpRequest对象：

var xhr;
if (typeof XMLHttpRequest != "undefined") {
  xhr = new XMLHttpRequest();
} else if (typeof ActiveXObject != "undefined") {
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
} else {
  throw new Error("XMLHttpRequest not supported");
}

示例二：Ajax请求

在Web前端开发中，常常需要通过Ajax技术向后台发送请求获取数据。为了兼容不同浏览器，可以采用如下方式发送Ajax请求：

var xhr;
if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

xhr.onreadystatechange = function(){
  if (xhr.readyState === 4 && xhr.status === 200) {
    var responseData = xhr.responseText;
    // 处理获取到的数据
  }
};

xhr.open("GET", "url", true);
xhr.send();