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：要调用的函数，可以为空或者先定义好的函数