关于绑定事件addEventListener()的兼容性写法以及解绑方法

时间: 作者:admin 浏览:
项目中addEventListener()方法是一个很不错的绑定事件方法,但是这个方法只能支持IE9以上版本,所以最好写一下兼容的写法,代码如下:


function addEventListeners(ele,type,callback){
	
	if(ele.addEventListener){
		ele.addEventListener(type,callback,false);
	}else if(ele.attachEvent){
		ele.attachEvent('on' + type,callback);
	}else{
		ele['on' + type] = callback;
	}
}


//另外还有人这么写也是可以的
function addEventListeners(ele,type,callback){
	
    try{  // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
        ele.addEventListener(type,callback,false);
    }catch(e){
        try{  // IE8.0及其以下版本
            ele.attachEvent('on' + type,callback);
        }catch(e){  // 早期浏览器
            ele['on' + type] = callback;
        }
    }
}



//可能有人会像下面这么写,但是其实在IE8下测试是无法执行的,具体原因无法查明



Object.prototype.addEventListeners=function(type,callback){
	
//	if(this.addEventListener){
//		this.addEventListener(type,callback,false);
//	}else if(this.attachEvent){
//		this.attachEvent('on' + type,callback);
//	}else{
//		this['on' + type] = callback;
//	}

    try{  // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
        this.addEventListener(type,callback,false);
    }catch(e){
        try{  // IE8.0及其以下版本
            this.attachEvent('on' + type,callback);
        }catch(e){  // 早期浏览器
            this['on' + type] = callback;
        }
    }
}

//对应的解绑方法如下:
function _off(el, event, fn) {
	if(el.removeEventListener){ 
	      el.removeEventListener(event,fn,false); 
	}else if(el.detachEvent){ 
	      el.detachEvent('on'+event,fn.bind(el)); 
	}else{
	      el['on' + event] = null;
	}
}

微信公众号
微信公众号:
  • 前端全栈之路(微信群)
前端QQ交流群
前端QQ交流群:
  • 794324979
  • 734802480(已满)

更多文章

栏目文章


Copyright © 2014-2023 seozhijia.net 版权所有-粤ICP备13087626号-4