曲振飞的个人博客

专注于Web全栈开发、APP设计、网站建设

当前位置 : 主页 > 前端开发 > DOM2级事件处理程序addEventListener和removeEventListener

DOM2级事件处理程序addEventListener和removeEventListener

时间:2016-09-03 11:01:28 栏目:前端开发 作者:曲振飞 点击: 450

DOM2级事件定义了两个方法:用于处理指定和删除事件处理程序的操作addEventListener()和removeEventListener().他们都接收三个参数:要处理的事件名、作为事件处理程序的函数、布尔值

注:以上两个方法在IE8及以下浏览器中不支持

IE有自己的事件处理程序

AttachEvent()添加事件

detachEvent()删除事件

接收相同的两个参数:事件处理程序的名称和事件处理程序的函数

不使用第三个参数的原因:IE8以及更早的浏览器版本只支持事件冒泡!

我们可以通过封装一个对象来让各个浏览器之间兼容,在这个对象中分别定义添加事件方法、删除事件方法两个函数:

var eventUntil={
//添加句柄
	addHandler:function(element,type,handler){ //事件对象,事件类型,触发事件的方法
		//如果是DOM2级就调用addEventListener方法
		if(element.addEventListener){
			element.addEventListener(type,handler,false);					
		}else if(element.attachEvent){//如果是IE浏览器
			element.attachEvent('on'+type,handler);
		}else{  //否则就是DOM0级
			element['on'+type]=handler;
		}
	},
	//删除句柄
	removeHandler:function(element,type,handler){ //事件对象,事件类型,事件触发的方法
		//如果是DOM2级
		if(element.removeEventListener){
			element.removeEventListener(type,handler,false);					
		}else if(element.detachEvent){//如果是IE浏览器
			element.detachEvent('on'+type,handler);
		}else{
			element['on'+type]=null;
		}
	}
}
//调用之前以经写好的方法传入三个参数分别是要处理的事件对象、触发的事件类型、触发的事件方法
eventUntil.addHandler(object,"click",showMessage);


关键字: DOM2级

关于站长

曲振飞,一个热忠、从事于互联网的90后青年.专注于网站建站、网站设计及优化.以用户体验、WEB标准为主旨,将网站的整体设计与网页设计的相关原理紧密结合.