今天想跟大家讨论下关于IE与其他浏览器之间的事件绑定事件的一些差别,在现在的WEB端从事DOM操作的程序员应该要常常为各种各样的元素绑定各种事件,那你是否真的了解各浏览器之间的事件绑定原理呢,今天我就给大家来简单解析下。

其实现在很多开发人员都在使用Jquery等JS框架进行开发,当然对于事件绑定不会遇到太多的兼容性,因为框架本身已经解决了跨浏览器之间的事件绑定的兼容问题。框架使用好坏就像一把双刃剑,高效,兼容性强等等都是好的一面,坏的一面当然是让使用者对其行程了依赖性,丧失了很多机会去接触更加底层的东西。其实本人在前两年的工作期也是非常依赖框架带来的便捷,当然后面也遇到了各种各样的瓶颈,好在最后开始觉悟了,嘿嘿!好了废话了一堆,马上进入正题。

首先我们来说下最简单暴力的javascript事件绑定方法吧。

1
2
3
4
var okBtn = document.getElementById("okBtn");
okBtn.onclick = function(){
    alert(this.id);   //"okBtn"
}

这个方法是全兼容的,所有浏览器都兼容的事件绑定方法,很多时候我们都会用到这个方法。虽然好用,但是这个方法仍然有弊端,因为这段代码他在运行前是不会指定事件处理程序的,因此这段代码必须在页面中处于那个ID为okBtn的按钮后面才行,假如这段代码还没被页面加载完的情况下,你点击这个按妞是不会有任何反应的,这样子的事件绑定对于很多产品需求而已是无法满足的。

所以介于这种情况下,javascript还有一种事件绑定方法。这也是我们接下来要讲的重点。在现代浏览器中(chrome,firefox…)支持这么一种事件绑定,通过addEventListener()来绑定事件,这个函数接受三个参数(绑定的事件对象,事件处理的函数,布尔值),最后一个布尔值是表示是否想要在事件捕获阶段就触发函数,一般都是false,因为一般的事件捕获阶段是不希望就触发函数的,关于事件捕获不懂的同学我会在后续出一篇文章来解释,今天就不对此做太多说明。以上的代码可以改成如下方法:

1
2
3
4
var okBtn = document.getElementById("okBtn");
okBtn.addEventListener("click",function(){
    alert(this.id);   //"okBtn"
},false);

但是**addEventListener()**方法不支持IE9(不包含IE9)以下的浏览器,说实在的IE9和IE9以后的版本对javascript增加了很多以前只有chrome,firefox才支持的方法,终于不再坑爹。

IE9以下的浏览器中有这么一个方法来绑定事件的。attachEvent()函数是用来绑定事件的,这个函数只需传入两个参数(绑定的事件对象,事件处理的函数)上面的方法支持IE的绑定代码如下:

1
2
3
4
var okBtn = document.getElementById("okBtn");
okBtn.attachEvent("onclick",function(){
    alert(this.id);   //"okBtn"
});

在IE9以下的浏览器都要这么用这个方法绑定,其实今天要告诉大家的不是这个绑定方法的差别,IE最坑爹的事情是重复绑定事件后先后执行的顺序。

除IE以外的浏览器重复绑定事件代码:

1
2
3
4
5
6
7
var okBtn = document.getElementById("okBtn");
okBtn.addEventListener("click",function(){
    alert(this.id);   //"okBtn"
},false);
okBtn.addEventListener("click",function(){
    alert("事件绑定2");   //""事件绑定2"
},false);

运行结果:先弹出了“okBtn”然后再弹出了“事件绑定2

IE浏览器重复绑定事件代码:

1
2
3
4
5
6
7
var okBtn = document.getElementById("okBtn");
okBtn.attachEvent("onclick",function(){
    alert(this.id);   //"okBtn"
});
okBtn.attachEvent("onclick",function(){
    alert("事件绑定2");   //""事件绑定2"
});

运行结果:先弹出了“事件绑定2”然后再弹出了“okBtn

这么坑爹,这是为啥,说实在的我也不知道,这您要问微软为啥?重复绑定一个事件,IE与其他浏览器执行先后不一致,这个问题大家一定要牢记,在IE9以下的浏览器中执行顺序都是反着者的,因为IE9开始已经支持**addEventListener()**方法所以不会在有这个问题了。

今天要讲的基本已经结束了,IE与其他浏览器事件重复绑定后执行顺序的差异。最后把跨浏览器绑定事件代码总结下:

1
2
3
4
5
6
7
8
9
var $event = {
    on : function(element,type,handler){
        if(element.addEventListener){//判断addEventListener函数方法是否存在
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent){//判断attachEvent函数方法是否存在
            element.attachEvent("on" + type,handler);
        }
    }
}

调用方法:

1
2
3
4
var okBtn = document.getElementById("okBtn");
$event.on(okBtn,"click",function(){
    alert("新方法");
});

经过封装后的方法在IE各版本与chrome,firefox下都兼容,大家可以测试一下。