JS事件监听详解

事件监听

关于事件监听，W3C规范中定义了3个事件阶段，依次是捕获阶段、目标阶段、冒泡阶段。起初Netscape制定了JavaScript的一套事件驱动机制（即事件捕获）。随即IE也推出了自己的一套事件驱动机制（即事件冒泡）。最后W3C规范了两种事件机制，分为捕获阶段、目标阶段、冒泡阶段。IE8以前IE一直坚持自己的事件机制（前端人员一直头痛的兼容性问题），IE9以后IE也支持了W3C规范。

事件监听的优点

1、可以绑定多个事件

<input type="button" value="click me" id="btn3">

		常规的事件绑定只执行最后绑定的事件
		
		<input type="button" value="click me" id="btn4">

2、可以解除相应的绑定

封装事件监听

function addEventHandler(target,type,fn){
if(target.addEventListener){
target.addEventListener(type,fn);
}else{
target.attachEvent(“on”+type,fn);
}
}

function removeEventHandler(target,type,fn){
if(target.removeEventListener){
target.removeEventListener(type,fn);
}else{
target.detachEvent(“on”+type,fn);
}
}

var btn5 = document.getElementById(“btn5”);
addEventHandler(btn5,“click”,hello1);
addEventHandler(btn5,“click”,hello2);
removeEventHandler(btn5,“click”,hello1);