JavaScript跨浏览器实现

1.event对象

在浏览器中，有时需要了解事件的一些详情，比如键盘上哪个键被按下了，事件触发时鼠标在什么位置等。为了了解这些信息，需要使用 event 对象。它是由浏览器自动生成的，包含的属性涉及被触发事件的方方面面。

关于 event 对象，这里有 W3C 兼容浏览器采取的方式和微软 IE 类型浏览器的方式两种实现方式。

在 Firefox 等更严格遵守 W3C 规范的浏览器里，当事件被触发时，会自动把 event 对象作为参数传递给事件处理器。为了访问 event 对象的属性，我们需要给它设置一个名称，也就是给事件处理器声明一个变量，比如：

var myElement = document.getElementById("soneID");
myElement.onclick = function(e) {
    //此处为事件处理器所执行的操作
}

在这个范例里，访问变量 e 的属性就可以访问 event 对象的属性：

myElement.onclick = function(e) {
    alert(e.type);
}

在以上代码中，使用“e”作为名称是个惯例，但不是必须的。在这里可以使用任何有效的对象名称。

微软采用的方式是给 window 对象设计了一个 event 属性。它包含最近一次被触发事件的细节：

var myElement = document.getElementById("someID");
myElement.onclick = function(e) {
    alert(window.event.type);
}

通过以上分析，我们可以根据使用功能检测而非浏览器检测的原则编写跨浏览器代码检测 event 对象是否存在：

if (!e) {
    var e = window.event;
}

上面这段代码在涉及到大多数 event 对象的事件属性时都可以正常运行，然而在 W3C 和微软的两种实现方式里还有很多事件属性不同,下表例举出了一部分：

微软	W3C	描述
offsetX, offsetY	n/a	事件在元素里的水平和垂直坐标
n/q	pageX, pageY	事件在文档里的水平和垂直坐标
srcElement	target	接收事件的对象

为了实现跨浏览器的代码，我们需要在脚本中检测 event 对象是否具有我们需要的方法和属性，比如：

if (!e) {
    e = window.event;
}
var element = (e.target) ? e.target : e.srcElement;

上面这段代码检测了是否存在 e.target，如果存在，用户使用的便是 W3C 类型的浏览器，变量便被赋值为 e.target。如果 e.target 不存在，脚本就使用 e.srcElement 的值。

总结：在实现有关 event 对象的跨浏览器代码时，不仅要检测 event 对象本身的合法性，也要检测 event 对象的属性和方法的合法性。注意：始终使用功能检测而非浏览器检测。

2.事件处理器的高级注册方式

2.1.添加事件处理器

添加事件处理器的高级方式，有 W3C 方式、旧版本 IE 方式两种。W3C方式如下：

//第一个参数指明要捕获的事件，第二个参数指明触发事件要执行的函数，第三个参数指定事件被捕获（true）还是冒泡（false）
element.addEventListener("click",func,false);

而旧版本 IE 方式如下：

element.attachEvent("onclick",func);

事实上，旧版本 IE 方式的 attachEvent() 函数仅有的两个参数的意义与 W3C 方式的 addEventListener() 函数的前两个参数的意义相同，只不过，旧版本 IE 方式在事件名称前面使用了前缀 on。所以 onclick 事件对应于 W3C 规范里的 click，对应于旧版本 IE 浏览器里的 onclick。

基于此，我们本着使用功能检测而非浏览器检测的原则可以编写出跨浏览器的添加事件处理器高级方式的函数。

//element 为要添加高级事件处理器的元素，eventType 为要捕获的事件（没有前缀 on 且为字符串形式）
//handlerFunction 为触发事件时要执行的函数
function addEventHandler(element,eventType,handlerFunction) {
    if (element.addEventListener) {
        element.addEventListener(eventType,handlerFunction,false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + eventType,handlerFunction);
    }
}

函数 addEventHandler() 非常实用，可以放在js文件里保存起来，等到用时引用 js 文件，像下面这样调用 addEventHandler() 函数即可：

var eventType = "click";
var myButton = document.getElementById("button1");
addEventHandler(myButton,eventType,myFunction);

2.2.删除事件处理器

与添加事件处理器高级方式相对应，删除事件处理器高级方式也有 W3C 方式、旧版本 IE 方式两种。W3C 方式如下：

element.removeEventListener("click",func,false);

旧版本 IE 方式如下：

element.detachEvent("onclick",func);

W3C 方式的 removeEventListener() 函数的参数意义与添加事件处理器高级方式 addEventListener() 函数的参数意义相同，旧版本 IE 方式的 detachEvent() 函数的参数亦是如此。

基于此，同理，按照使用功能检测而非浏览器检测的方式，我们可以编写出跨浏览器的删除事件处理器高级方式的函数。

function removeEventHandler(element,eventType,handlerFunction) {
    if (element.removeEventListener) {
        element.removeEvenetListener(eventType,handlerFunction,false);
    } else if (element.detachEvent) {
        element.detachEvent("on" + eventType,handlerFunction);
    }
}

3.创建XMLHttpRequest对象

在 Ajax 编程中，需要创建 XMLHttpRequest 的实例，然而不同浏览器实现 XMLHttpRequest 对象的方式各不相同。我们无法预测用户使用什么版本、什么操作系统、什么浏览器来访问站点，所以为了兼容所有浏览器，在编写跨平台代码时一定要考虑到所有情况。

对于大多数本身支持 XMLHttpRequest 对象的浏览器（比如 Firefox、Opera以及较新版本的IE）来说，创建 XMLHttpRequest 的实例是直接的：

var request = new XMLHttpRequest();

然而对于 IE 来说，创建一个新的 XMLHttpRequest 对象的实例是比较麻烦的。微软最早在 IE5 中以 ActiveX 对象的形式实现了一个名为 XMLHTTP 的对象，在 IE 中创建新的 XMLHttpRequest 对象要使用以下代码：

var request = new ActiveXObject("Msxml2.XMLHTTP.3.0");

麻烦的是，某些 IE 安装了不同版本的 XML 解析器，使用的 XMLHTTP 对象也不完全相同。为了兼容所有的浏览器，我们可以编写一个实用的函数来处理这些情况，然后在需要创建一个新的 XMLHttpRequeset 对象的实例时调用它即可。基于以上的分析，有以下的解决策略：

function getXMLHttpRequest() {
    if (typeof XMLHtppRequest == "undefined") {
        XMLHttpRequest = function() {
            try {
                return new ActiveXObject("Msxml2.XMLHTTP.6.0");
            } ctach (e) {}
            try {
                return new ActiveXObject("Msxml2.XMLHTTP.3.0");
            } catch (e) {}
            try {
                return new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {}
        }
    } else {
        return newXMLHttpRequest();
    }
}

函数 getXMLHttpRequest() 已经编写完毕，以后，若是再需创建一个新的 XMLHttpRequest 对象的实例，直接下面这样调用 getXMLHttpRequest() 函数即可：

var request = getXMLHttpRequest();