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;
　　　　　}
　　}
}

DOM事件处理程序