事件及事件对象（一）

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

• DOM0级处理方式，如下

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

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

• 1 oBtn.onclick = null;

• DOM2级处理方式，如下

• oBtn.addEventListener('click',function(){
      alert('你好');
  },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;
          }
      }
  };