Dzwebs.Net

　　当同一个对象使用.onclick的写法触发多个方法的时候，后一个方法会把前一个方法覆盖掉，也就是说，在对象的onclick事件发生时，只会执行最后绑定的方法。比如下面的代码：

　　var btn = document.getElementById("yuanEvent"); 
　　window.onload = function(){ 
    　btn.onclick = function(){ 
        alert("第一个事件"); 
   　 } 
    　btn.onclick = function(){ 
        alert("第二个事件"); 
   　 } 
    　btn.onclick = function(){ 
        alert("第三个事件"); 
   　 } 

　　运行的结果只输出：第三个事件，因为后一个方法都把前一个方法覆盖掉了。

　　而用事件监听则不会有覆盖的现象，每个绑定的事件都会被执行。

　　①添加监听事件

　　var eventOne = function(){ 
        alert("第一个监听事件"); 
    　　} 
    　　function eventTwo(){ 
    　    alert("第二个监听事件"); 
   　 } 
  　  window.onload = function(){ 
  　      var btn = document.getElementById("yuanEvent"); 
  　      //addEventListener：绑定函数 
   　     btn.addEventListener("click",eventOne); 
   　     btn.addEventListener("click",eventTwo); 
  　  } 

　　输出：第一个监听事件 和 第二个监听事件

　　②添加监听与解除事件

　　var eventOne = function(){ 
        alert("第一个监听事件"); 
  　  } 
  　  function eventTwo(){  
        alert("第二个监听事件"); 
    　} 
  　  window.onload = function(){ 
        var btn = document.getElementById("yuanEvent"); 
        btn.addEventListener("click",eventOne); 
        btn.addEventListener("click",eventTwo); 
        btn.removeEventListener("click",eventOne); 
   　 } 

　　输出：第二个监听事件

　　③兼容各种浏览器的监听事件的通用代码

　　/*  addEventListener:监听Dom元素的事件  */ 
　　function addEventHandler(target,type,func){ 
   　 　if(target.addEventListener){ 
       　 //监听IE9，谷歌和火狐 
       　 target.addEventListener(type, func, false); 
  　 　 }else if(target.attachEvent){ 
       　 target.attachEvent("on" + type, func); 
 　 　  }else{ 
  　     　 target["on" + type] = func; 
   　　 }  
　　} 

　　/*  removeEventHandler:移除Dom元素的事件  */ 
　　function removeEventHandler(target, type, func) { 
 　   if (target.removeEventListener){ 
 　       //监听IE9，谷歌和火狐 
 　       target.removeEventListener(type, func, false); 
 　   } else if (target.detachEvent){ 
  　      target.detachEvent("on" + type, func); 
  　  }else { 
       　 delete target["on" + type]; 
  　  } 
　} 
　var eventOne = function(){ 
　    alert("第一个监听事件"); 
　} 
　function eventTwo(){ 
　    alert("第二个监听事件"); 
　} 
　window.onload = function(){ 
　    var bindEventBtn = document.getElementById("bindEvent"); 
　    //监听eventOne事件 
 　   addEventHandler(bindEventBtn,"click",eventOne); 
  　  //监听eventTwo事件 
 　   addEventHandler(bindEventBtn,"click",eventTwo ); 
 　   //监听本身的事件 
 　   addEventHandler(bindEventBtn,"click",function(){ 
  　      alert("第三个监听事件"); 
 　   }); 
  　  //取消第一个监听事件 
  　  removeEventHandler(bindEventBtn,"click",eventOne); 
 　   //取消第二个监听事件 
  　  removeEventHandler(bindEventBtn,"click",eventTwo); 
　}