事件绑定与解绑

Posted 2020-08-23

事件绑定与解绑

var EventUtil = {

addHandler:function (obj, type, handler) {

if(obj.addEventListener) {               //如果是标准浏览器，即支持addEventListener的

console.log(‘标准浏览器‘);

obj.addEventListener(type, handler);

} else if(obj.attachEvent) {            //IE低版本浏览器

console.log(‘IE低版本浏览器‘);

obj.attachEvent(‘on‘ + type, handler);

} else {

console.log(‘以上都不支持‘);

obj[‘on‘ + type] = handler;

}

},

removeHandler:function(obj, type, handler) {

if(obj.removeEventListener) {         //标准浏览器

obj.removeEventListener(type, handler);

} else if(obj.detachEvent) {          //IE低版本浏览器

obj.detachEvent(‘on‘ + type, handler);

} else {                              //以上皆不是

obj[‘on‘ + type] = null;

}

}

}

 

问题：在IE中使用attachEvent()与使用DOM0级方法的主要区别在于事件处理程序的作用域。在使用DOM0级方法的情况下，事件处理程序会在其元素的作用域内运行；在使用attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，因此this等于window

 

例：

在低版本ie中div不变色

 

在绑定事件的时候可以用

function addHandler(obj,evname,fn){

if(obj.addEventListener){

obj.addEventListener(evname,fn,false);

}else{

obj.attachEvent(‘on‘+evname,function(){

fn.call(obj); //call方法第一个参数可以用来改变函数执行过程当中的内部this指向，attachEvent 下 this 指向的不是obj

});

}

}

 

 

　　

在低版本ie下正常

 

 

Obj.attachEvent(事件名称，事件函数)

• 没有捕获
• 事件有on
• 事件函数执行顺序  （标准ie正序     非标准 倒序）
• This指向window

 

Obj.addEventListener(事件名称，事件函数，是否捕获)  ---->  默认false冒泡   true捕获

• 有捕获
• 事件名称没有on
• 正序
• this指向出发该事件的对象