【js基础】JS事件处理程序

事件处理程序分类：
1. HTML事件处理程序
2. DOM0级事件处理程序
3. DOM2级事件处理程序
4. IE事件处理程序
5. 跨浏览器事件处理程序

HTML事件处理程序(已被摒弃)

DOM0级事件处理程序。

将一个DOM对象的事件处理函数指向一个函数。
一般在事件流的冒泡阶段处理。
绑定事件处理程序。
var btn=document.getElementById(“mybtn”);
btn.onclick=function(){
alert(this.id);
}
解除事件处理程序
btn.onclick=null;

DOM2级事件处理程序

绑定事件处理程序：
var handler=function(){
alert(this.id);
};
var btn=document.getElementById(“mybtn”);
btn.addEventListener(‘click’,handler,false);
false 表示在捕获阶段调用事件处理程序；true表示在捕获阶段调用事件处理函数；

解除事件处理函数
btn.removeEventListener(‘click’handler,false);
removeEventListener必须与addEventListener传入的参数一样。

IE事件处理程序
var btn=document.getElementById(“mybtn”);
var handler=function(){
alert(“Click”);
};
绑定事件处理程序：
btn.attachEvent(‘onclick’,handler);
解除事件处理函数:
Btn.datachEvent(‘onclick’,handler); 传入的参数必须与attachEvent一样。
注意点：
IE处理程序的回调函数中的this不指向调用该事件处理函数的DOM对象，而是指向window.
IE事件处理程序都是在冒泡阶段执行的。

跨浏览器的事件处理程序

var eventUtil={
addHandler: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;
}
}
},
removeHandler:function(ele,type,handler){
if(ele.removeEventListener){
ele.removeEventListener(type,handler,false);
}else{
if(ele.datachEvent){
ele.datachEvent(‘on’+type,handler);
}else{
ele[‘on’+type]=null;
}
}
};

参考资料

《Javascrip高级程序设计》（第三版）