JavaScript跨浏览器事件处理

事件处理程序有以下几种方式：

1. HTML事件处理程序
2. DOM0事件处理程序
3. DOM2事件处理程序
4. IE事件处理程序

下面将针对不同的地方而编写一个跨浏览器事件处理程序。

HTML事件处理程序

最常见的是HTML代码中内联事件处理程序，如下面代码所示：

<input type="button" id="btn" value="提交" onclick="alert('已提交！')"/>

事件处理函数可以在HTML标签中直接书写要执行的具体内容，或者调用页面的其他地方进行执行。如下代码：

<input type="button" id="btn" value="提交" onclick="fun()"/>
<script type="text/javascript">
    function fun(){
        alert("已提交！");
    }
</script>

不过在HTML中指定事件处理函数存在两个问题：
1. 存在时差问题，有时候用户会在HTML元素刚出现的时候就触发响应事件，但是可能那时候并不具备事件处理函数执行的条件。
2. 导致HTML和JavaScript耦合，需要修改事件处理程序时就得改动HTML代码和函数处理代码。

DOM0级事件处理程序

DOM0级事件处理程序至今仍被所有浏览器支持，原因在于：
1. 简单易用
2. 跨浏览器支持

DOM0级事件处理程序在JavaScript代码中书写，解决了HTML耦合问题。可如下书写代码：

var btn = document.getElementById("btn");
//事件绑定
btn.onclick = function(){
    alert("已提交");
}

DOM2级事件处理程序

DOM2级事件监听以及删除事件处理程序使用的是addEventListener()和removeEventListener()。传递的参数为：事件处理程序名称（“click”、“focus”等）、事件处理函数以及一个布尔值（如果是true表示在捕获阶段调用事件处理程序，如果是false表示在冒泡阶段调用事件处理程序）。
例如要添加事件监听，如下代码：

var btn = document.getElementById("btn");
//事件绑定
btn.addEventListener("click",function(){
    alert("已提交！");
},false);

用addEventListener()添加的事件处理程序只能用removeEventLisenter()来移除，但是事件监听调用的匿名函数无法在事件删除过程中移除，代码如下：

btn.removeEventLiatener("click",function(){     //移除无效
    alert("已提交！");
},false);

上面的代码在removeEventLiatener()函数中传递的参数与addEventListener()传递参数一样，但是由于传递的是匿名函数，所以是两个完全不同的函数，并不能移除。
可通过传递函数名的方式来解决上面的问题，代码如下：

var btn = document.getElementById("btn"),
    fun = function(){
        alert("已提交！");
        };
btn.addEventListener("click",fun,false);
btn.removeEventLiatener("click",fun,false);  //移除有效

只有IE9、Firefox、chrome、Safari和opera支持DOM2级事件处理程序。

IE事件处理程序

IE的事件处理程序使用的是attachEvent()和detachEvent()函数，传递的参数为：事件处理程序名称（“click”、“focus”等）以及事件处理函数。
事件监听可如下书写代码：

var btn = document.getElementById("btn");
//事件绑定
btn.attachEvent("onclick",function(){
    alert("已提交！");
});

上述代码中，attachEvent()传递的事件处理程序名称为“onclick”而不是“click”。
和DOM2级一样的是，detachEvent()移除处理函数时，传递匿名函数将会移除失败。同样需要传递函数名进行移除，代码如下：

var btn = document.getElementById("btn"),
    fun = function(){
        alert("已提交！");
        };
btn.addEventListener("click",fun,false);
btn.removeEventLiatener("click",fun,false);  //移除有效

上面的代码使用fun作为函数名，并传递给事件监听和事件删除函数。

跨浏览器事件处理程序

针对不同的事件处理程序，编写一个跨浏览器的事件处理程序，代码如下：

function addHandler(element,type,handler){
    if(element.addEventListener){      //DOM2级事件绑定
        element.addEventListener(type,handler,false);
    }
    else if(element.attachEvent){      //IE事件绑定
        element.attachEvent("on"+type,handler);
    }
    else{
        element["on"+type] = handler;  //DOM0级事件绑定
    }
}
function removeHandler(element,type,handler){
    if(element.removeEventListener){         //DOM2级事件移除
        element.removeEventListener(type,handler,false);
    }
    else if(element.detachEvent){            //IE事件移除
        element.detachEvent("on"+type,handler);
    }
    else{
        element["on"+type] = null;           //DOM0级事件移除
    }
}

以上代码先是检测是否支持DOM2级方法，如果存在则传递三个参数。如果是IE的事件处理方法，则传递两个参数，其中事件处理名称为“on”+type。最后一个采用DOM0级事件处理程序。
函数调用的方法如下：

var btn = document.getElementById("btn");
addHandler(btn,"click",function(){
    alert("已提交！");
});
removeHandler(btn,"click",function(){
    alert("已提交！");
});

除了传递匿名函数外，也可以传递函数名进行调用，代码如下：

var btn = document.getElementById("btn"),
    fun = function(){
        alert("已提交！");
    };
addHandler(btn,"click",fun);
removeHandler(btn,"click",fun);

以上事件处理程序并不能解决所有的浏览器问题，比如IE中的作用域问题等，但是针对事件绑定以及事件删除已经足够了。