事件处理

DOM 0 级事件处理

比如通过getElementById页面获取要处理的元素，再把一个函数赋予它的onclick属性。

var btn = document.getElementById("button");btn.onclick = function(){return alert("Clicked");}

这时，事件处理程序是在元素的作用域中运行。

DOM 2 级事件处理

有两个方法：addEventListener() ,  removeEventListener(). 它们都包含3个参数：事件名称（click），处理的方法，true（捕获阶段处理）／false（冒泡阶段处理）。

DOM中所有节点都有这两个方法。

addEventListener()的事件只能通过removeEventListener()来清除，且参数一致。所以如果中间写的处理方法为匿名函数的话，就无法清除，因此要用函数表达式的方法，把函数赋值给一个变量。

var btn = document.getElementById("button");var handler = function(){return this.id;};btn.addEventListener("click", handler, false);btn.removeEventListener("click", handler, false);

这时，事件处理程序是在元素的作用域中运行。顺序执行

注意：在IE中为，attachEvent, detachEvent; 第一个参数为onclick, 且没有第三个参数（全在冒泡阶段处理）。从最后一个attachEvent执行，依次往前。

在全局作用域中运行。

跨浏览器事件处理：

var domEvent = {   //element:dom对象，event:待处理的事件，handleFun:处理函数   //事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等   addEvent:function(element,event,handleFun){     //addEventListener----应用于mozilla     if(element.addEventListener){       element.addEventListener(event,handleFun,false);     }//attachEvent----应用于IE     else if(element.attachEvent){       element.attachEvent("on"+event,handleFun);     }//其他的选择dom0级事件处理程序     else{       //element.onclick===element["on"+event];       element["on"+event] = handleFun;     }   },   //事件名称，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等   removeEvent:function(element,event,handleFun){     //removeEventListener----应用于mozilla     if (element.removeEventListener) {       element.removeEventListener(event,handleFun,false);     }//detachEvent----应用于IE     else if (element.detachEvent) {       element.detachEvent("on"+event,handleFun);     }//其他的选择dom0级事件处理程序     else {       element["on"+event] = null;     }   },   //阻止事件冒泡   stopPropagation:function(event){     if(event.stopPropagation){       event.stopPropagation();     }else{       event.cancelBubble = true;//IE阻止事件冒泡，true代表阻止     }   },   //阻止事件默认行为   preventDefault:function(event){     if(event.preventDefault){       event.preventDefault();     }else{       event.returnValue = false;//IE阻止事件冒泡，false代表阻止     }   },   //获得事件元素   //event.target--非IE   //event.srcElement--IE   getElement:function(event){     return event.target || event.srcElement;   },   //获得事件   getEvent:function(event){     return event? event : window.event;   },   //获得事件类型   getType:function(event){     return event.type;   } };