addevent()实现跨浏览器绑定事件

绑定事件一般有三种方式：传统绑定事件，IE绑定事件，W3C绑定事件。传统绑定存在可读性问题，this问题，覆盖问题。为实现跨浏览器绑定事件，我们采用自定义方法addEvent().代码如下：

//跨浏览器兼容添加事件监听

function addEvent(obj,type,fn){
if(obj.addEventListener){
obj.addEventListener(type,fn,false);
}//W3C
else if(obj.attachEvent){
obj.attachEvent('on'+type,fn);
}//IE浏览器
}

//跨浏览器兼容移除事件监听

function removeEvent(obj,type,fn){
if(obj.removeEventListener){
obj.removeEventListener(type,fn,false);
}//w3c
else if(obj.detachEvent){
obj.detachEvent('on'+type,fn);
}//IE浏览器
}

//跨浏览器兼容取得目标对象，取得触发事件的当前对象

function getTarget(evt){
if(evt.target){
return evt.target;
}//w3c，相当于this
else if(window.event.srcElement){
return window.event.srcElement;
}//IE浏览器，在Ie中this ===window
}

addEvent(window,'load',function(){
var box = document.getElementById('box');//取得ID名为box对象的引用
addEvent(box,'click',toBlue);
});

//以上是实现兼容W3C和IE浏览器的代码

—————————————————————————————————————————————————————————————————————————————

1.覆盖问题，事实上， W3C和IE覆盖问题都已经的得到解决。

在W3C中，window.addEventListener('load',function(){ alert('a'); },false);

window.addEventListener('load',function(){ alert('b'); },false);

window.addEventListener('load',function(){ alert('c'); },false);

在IE中，window.attachEvent('load',function(){ alert('a'); },false);

window.attachEvent('load',function(){ alert('b'); },false);

window.attachEvent('load',function(){ alert('c'); },false);

以上代码在IE和W3C中的执行结果a,b,c都能弹出，但是在IE中结果弹出的顺序是c,b,a,顺序从下往上

2.相同函数屏蔽问题，

在W3C中，该问题被解决，出现相同的函数，前面的函数会被覆盖，只执行最后一个函数。

在IE中，相同函数不会被覆盖，所有的函数都会执行例如：

window.attachEvent('onload',a);

window.attachEvent('onload',a);

window.attachEvent('onload',a);

function a(){

alert('eee');

}

//以上三个函数都会执行，结果分别都弹出eee

3.传递this问题

在W3C中，this表示的是触发事件程序的目标对象

但在IE中，this表示的是window对象

4.添加一个格外的方法是否会被覆盖或者只能执行一次

再W3C和IE中该问题都已经被解决

attachEvent('onload',function(){

var box = document.getElementById('box');

box.attachEvent('click',function(){ alert('www'); });

box.attachEvent('click',function(){ alert('aaa');});

});

//代码执行的结果分别弹出www,aaa

5.冒泡和捕获问题

在W3C中，事件处理程序可以冒泡和捕获

在IE中，只支持冒泡事件

—————————————————————————————————————————————————————————————————————————————

以下代码是为了运用代码，做了一个盒子变换颜色的切换器

function toBlue(evt){
var evt = getTarget(evt);
evt.style.background = 'blue';
removeEvent(evt,'click',toBlue);//移除当前事件监听，避免因内存得不到释放，造成内存泄露，使得性能下降，甚至导致系统奔溃
addEvent(evt,'click',toRed);//添加事件监听
}

function toRed(evt){
var evt = getTarget(evt);
evt.style.background = 'red';
removeEvent(evt,'click',toRed);
addEvent(evt,'click',toBlue);
}