attachEvent 与 addEventListener 的用法、区别

我现在要给这个 id 为button 的元素添加click 事件，并且点击一次要连续执行三个函数

<div id="button">click me</div>

一般我们写一个js 事件都是这么写的：

<script type="text/javascript">
  function  clickButton(){
    alert('点击我第一次');
  }
  function  clickButtonT(){
    alert('点击我第二次');
  }
  function  clickButtonr(){
    alert('点击我第三次');
  }  

document.getElementById('button').onlick = clickButton;
document.getElementById('button').onlick = clickButtonT;
document.getElementById('button').onlick = clickButtonr;
</script>

但是这种写法你执行后会发现只弹出了“一个点击我三次”；

下面我们就使用下attachEvent的方法来进行编写：

        document.getElementById('button').attachEvent('onclick',clickButton);
        document.getElementById('button').attachEvent('onclick',clickButtonT);
       document.getElementById('button').attachEvent('onclick',clickButtonr);

使用该方法后三个函数都执行了，执行顺序：clickButtonr、clickButtonT、clickButton

执行到这，你用IE之外的浏览器测试会发现报错，是因为这个attachEvent很不幸的并不支持其他的浏览器，他是IE特有的；但是并不是说就没有其他的方法来支持火狐以及其他的浏览器了，现在有一个 addEventListener 的方法是可以支持的，具体写法是这样的

document.getElementById('button').addEventListener('click',clickButton,false);
document.getElementById('button').addEventListener('click',clickButtonT,false);
document.getElementById('button').addEventListener('click',clickButtonr,false);

使用该方法后三个函数都执行了，执行顺序：clickButton 、clickButtonT、clickButtonr,最终想要实现可以同时兼容所有浏览器：那么就结合着attachEvent和addEventListener这两个方法来实现。实现方法如下：

<script type="text/javascript">
   function ManageEvent(eventObj,event,eventHandler){
      if(eventObj.addEventListener){
        eventObj.addEventListener(event,eventHandler,false);
      }else if(eventObj.attachEvent){
        event = "on"+ event;
      eventObj.attachEvent(event,eventHandler);
      };
   };
   
  function  clickButton(){
    alert('点击我第一次');
  }
  function  clickButtonT(){
    alert('点击我第二次');
  }
  function  clickButtonr(){
    alert('点击我第三次');
  }  
  

  window.onload = function(){
       ManageEvent(document.getElementById('button'),'click',clickButton);
       ManageEvent(document.getElementById('button'),'click',clickButtonT);
       ManageEvent(document.getElementById('button'),'click',clickButtonr);
  }