js事件

事件分为事件冒泡（IE8及以下仅支持冒泡）和事件捕获

1.HTML事件处理程序

缺点js代码和HTML代码紧密的耦合在了一起，更改不方便。

2.DOM0事件处理程序var eventUtil={

    //添加句柄

    addHandler:function()

}

btn2.οnclick=function(){}

btn2.οnclick=null;//删除事件

3.DOM2事件处理程序

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

btn3.addEventListener('click',showMes,false);   showMes是一个函数名

btn3.addEventListener('click',function(){alsert(this.value);},false);

btn3.removeEventListenser('click',showMes,false);

4.IE事件处理程序

attachEvent()添加事件

detachEvent()删除事件

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

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

btn3.attachEvent('onclick',showMes);  其中showMes是函数名

btn3.detachEvent('onclick',showMes);

综上，解决浏览器兼容性的封装及调用如下：

//跨浏览器事件处理程序
var eventUtil={
	//添加句柄
	addHandler:function(element,type,handler){		//type最好传click进来
		if(element.addEventListener){	//DOM2级事件处理
			element.addEventListener(type,handler,false);
		}else if(element.attachEvent){		//IE事件处理程序判断
			element.attachEvent('on'+type,handle);
		}else{		//DOM0级事件处理
			element['on'+type]=handler;
			//element.οnclick===element['onclick']
		}
	}
	//删除句柄
	removeHandler:function(element,type,handler){		//type最好传click进来
		if(element.removeEventListener){	//DOM2级事件处理
			element.removeEventListener(type,handler,false);
		}else if(element.detachEvent){		//IE事件处理程序判断
			element.detachEvent('on'+type,handle);
		}else{		//DOM0级事件处理
			element['on'+type]=null;
			//element.οnclick===element['onclick']
		}
	}
}

eventUtil.addHandler(btn3,'click',showMes);		//showMes是函数名
eventUtil.removeHandler(btn3,'click',showMes);