问题说明
当在用attachEvent给元素添加事件的时候,默认的this 指向是window,为了在元素作用范围内,我们会进行如下处理.
function bind(obj,eventName,fn){
if(obj.addEventListener){
obj.addEventListener(eventName,fn,false);
}else{
obj.attachEvent('on'+eventName, function () {
fn.call(obj);//改变this指向 默认window
})
}
}
提问
这时候attachEvent 第二个参数传进去的是一个匿名函数所以我们无法通过detachEvent来移除添加的事件处理函数,那怎样才能既改变this指向又能方便的移除添加的事件处理函数呢?
function bind(obj,eventName,fn){
var _fn = fn;
fn = function(){
_fn.call(obj);//改变this指向 默认window
};if(obj.addEventListener){
obj.addEventListener(eventName,fn,false);
}else if(obj.attachEvent){
obj.attachEvent('on'+eventName, fn);
}
return fn;
}
//添加
function bind(obj,eventName,fn){
if(obj.addEventListener){
obj.addEventListener(eventName,fn,false);
}else if(obj.attachEvent){
obj.attachEvent('on'+eventName, fn.bind(obj));//通过es5 中的bind改变this指向 ie9以下不支持
}
}
//移除
function unbind(obj,evenName,fn){
if(obj.removeEventListener){
obj.removeEventListener(evenName,fn);
}else if(obj.detachEvent){
obj.detachEvent('on'+evenName,fn);
}
}