事件处理程序

1、HTML事件处理程序

将事件直接添加在html结构里的元素上的时间叫做html事件处理程序

缺点：结构和行为不分离

eg : <input type="button" value="点击" οnclick="alert('hello')" /> 

2、DOM0级事件处理程序

eg : <input type="button" value="点击" id="btn2" />
<script>
var btn2=document.getElementById("btn2");
btn2.οnclick=function(){
alert("DOM0 级事件");
}
</script>

3、DOM2级事件处理程序

DOM2级事件处理程序定义了两个方法：

用于处理添加和删除事件处理程序的操作：addEventListener() 和 removeEventListener()。

需要接收三个参数：要处理的事件名、作为事件处理程序的函数和布尔值  （布尔值是用来判断是事件冒泡还是事件捕获）

eg: <input type="button" value="点击" id="btn3" />

<script>

var btn3=document.getElementById("btn3");
btn3.addEventListener("click",function(){
alert("hello DOM2");
},false);
btn3.removeEventListener("click",function(){
alert("hello DOM2");
},false);

</script>

4、IE事件处理程序

attachEvent() 添加事件

detachEvent() 删除事件

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

注意：不需要添加布尔值的原因是：因为IE8及更早的浏览器版本只支持事件冒泡。

eg : 

<input type="button" value="点击" id="btn3" />

<script>

var show=function(){

alert("hello IE event");

}

//添加事件

btn3.attachEvent("onclick",show);

//删除事件

btn3.detachEvent("onclick",show);

</script>

5、跨浏览器的事件处理程序

对浏览器进行能力检测

var EventUtil={

addEventHandler:function(ele,type,handler){

if(ele.addEventListener){

ele.addEventListener(type,handler,false);

}

else if(ele.attachEvent){

ele.attachEvent('on'+type,handler);

}

else{

ele['on'+type]=handler;

}

},

removeEventHandler:function(){

if(ele.removeEventListener){

ele.removeEventListener(type,handler,false);

}

else if(ele.detachEvent){

ele.detachEvent('on'+type,handler);

}

else{

ele['on'+type]=null;

}

}

}