DOM事件处理程序

事件流

事件冒泡：

即事件最开始由具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）。

事件捕获：

捕获阶段是一个和冒泡阶段完全相反的过程，即事件由祖先元素向子元素传播，不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。

JavaScript中的事件处理根据标准和浏览器的兼容程度共有三种方式：

DOM0级处理方式，如下

1 var oBtn = document.getElementById('btn');2 oBtn.onclick = function(){3    alert('你好');     4 };

这种方式不存在兼容问题，但缺点是一次只能绑定一个处理程序，而且后绑定的会覆盖先绑定的。对应的解除事件处理程序的方法如下：

1 oBtn.onclick = null;

DOM2级处理方式，如下

1 oBtn.addEventListener('click',function(){2     alert('你好');3 },false);

第一个参数是事件类型，注意这里没有’on’；第二个参数是事件处理程序；第三个参数如果为true则在捕获阶段执行函数，如果为false，则在冒泡阶段执行函数，如果没有特殊要求都为false。需要牢记的是在使用该方式的时候处理函数必须是命名函数，因为这样在解除绑定时才能有效，否则看似一样的函数实际是两个对象，你绑定了对象1，然后再解除对象2，那么是无法解除对象1的：

function handler(){  alert('你好');  }oBtn.addEventListener('click',handler,false);oBtn.removeEventListener('click',handler,false);

这种方式可以同时对元素绑定多个处理程序而不会相互覆盖：

function handler(){  alert('你好');  }function handler2(){    alert('hello');}oBtn.addEventListener('click',handler,false);oBtn.addEventListener('click',handler2,false);

这里为oBtn先后绑定了handler和handler2两个点击事件的处理程序，当点击鼠标后，会先弹出‘你好’，再弹出‘hello’，这是根据绑定的先后顺序决定的。

IE事件处理程序

function handler(){    alert('你好');}oBtn.attachEvent('onclick',handler);

这里与DOM2级不同的是只有两个参数，并且第一个参数必须加’on’，没有第三个参数的原因是IE没有捕获阶段；同样的，处理程序必须是匿名函数，这样解除绑定才有效：

function handler(){    alert('你好');}oBtn.attachEvent('onclick',handler);oBtn.detachEvent('onclick',handler);

IE事件处理的方式也可以为一个DOM元素同时绑定多个事件处理函数：

function handler(){  alert('你好');  }function handler2(){    alert('hello');}oBtn.attachEventListener('click',handler);oBtn.attachEventListener('click',handler2);

与DOM2不同的是当点击按钮时，会先弹出‘hello’，再弹出‘你好’，顺序正好相反。

下面写一个包含兼容各个浏览器的事件绑定程序和解除程序的对象：

var EventUtil = {    addEvent: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;        }　　 },    removeEvent:function(ele,type,handler){        if(ele.removeEventListener){            ele.removeEventListener(type,handler,false);        }else if(ele.detachEvent){　　         ele.detachEvent('on'+type,handler);        }else{             ele['on'+type] = null;        }    }};//ele:你要作用的对象，如button，文本等//type：对象事件，如onclick，onmouseover.//hander：要调用的函数，可以为空或者先定义好的函数