标签：注意 顺序 函数名 ie8 null listen cti odm doc
DOM事件处理程序：DOM0级事件处理程序、DOM2级事件处理程序
DOM0级事件处理程序：
例如：var btn = document.getElementById(‘myBtn‘);
btn.onclick = function(){
//事件处理逻辑
}
通过btn.onclick =null; 可以删除事件处理程序
DOM2级事件处理程序：
例如：var btn = document.getElementById(‘myBtn‘);
btn.addEventListener(‘click‘,function(){
//事件处理逻辑
},false);
说明：
addEventListener:添加事件处理，接收三个参数：1、事件类型名 2、事件处理函数 3、布尔值 ——true:表示在捕获阶段调用事件处理程序，false:表示在冒泡阶段调用事件处理，使用addEventListener()可以添加多个事件相同类型的事件，会按照顺序执行。
removeEventListener:移除事件处理程序，参数与添加处理程序使用的参数相同，有一点需要注意，无法移除匿名函数，所以在添加事件处理函数和移除事件处理函数的函数名要是同一个
例如：var btn = document.getElementById(‘myBtn‘);
var hander = function(){
alert(this.id);
}
btn.addEventListener(‘click‘,hander ,false);
btn.removeEventListener(‘click‘,hander,false)
IE8及更早版本/Opera浏览器事件处理程序：
通过attachEvent() 和 detachEvent()两个方法实现。两个方法接收的参数相同：事件处理程序名称和事件处理程序的函数
注意：在使用attachEvent()与使用ODM0级方法的主要区别在于事件处理程序的作用域。在使用ODM0级方法的情况下，事件处理程序会在其所属元素的作用域内运行；在使用attachEvent()方法的情况下，事件处理程序在全局作用域中运行，因此this 等于window
例如：var btn =document.getElementById(‘myBtn‘);
var hander = function(){
//事件处理逻辑
}
btn.attachEvent(‘onclick‘,hander);
btn.detachEvent(‘onclick‘,hander);
可跨浏览器的事件处理程序
要保证处理事件的代码能在大多数浏览器下一致地运行，只需要关注冒泡阶段。如下处理方法，接收三个参数（要操作的元素、事件名称、事件处理函数）
var EventUtil = {
addHandle : function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on"+type] = handler;
}
},
removeHandle:function(element,type,handler){
if (element.removeEventListener) {
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on"+type] = null;
}
}
}
标签：注意 顺序 函数名 ie8 null listen cti odm doc
原文地址：http://www.cnblogs.com/reganblog/p/6147234.html
