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