js事件監(jiān)聽(tīng)器用法實(shí)例詳解

更新時(shí)間：2015年06月01日 11:55:18 作者：天使小寶

這篇文章主要介紹了js事件監(jiān)聽(tīng)器用法,以實(shí)例形式較為詳細(xì)的分析了javascript事件監(jiān)聽(tīng)器使用注意事項(xiàng)與相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了js事件監(jiān)聽(tīng)器用法。分享給大家供大家參考。具體分析如下：

1、當(dāng)同一個(gè)對(duì)象使用.onclick的寫(xiě)法觸發(fā)多個(gè)方法的時(shí)候，后一個(gè)方法會(huì)把前一個(gè)方法覆蓋掉，也就是說(shuō)，在對(duì)象的onclick事件發(fā)生時(shí)，只會(huì)執(zhí)行最后綁定的方法。而用事件監(jiān)聽(tīng)則不會(huì)有覆蓋的現(xiàn)象，每個(gè)綁定的事件都會(huì)被執(zhí)行。如下：

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

最后只輸出：第三個(gè)事件，因?yàn)楹笠粋€(gè)方法都把前一個(gè)方法覆蓋掉了。

原生態(tài)的事件綁定函數(shù)addEventListener：

var eventOne = function(){ 
 alert("第一個(gè)監(jiān)聽(tīng)事件"); 
} 
function eventTwo(){ 
 alert("第二個(gè)監(jiān)聽(tīng)事件"); 
} 
window.onload = function(){ 
 var btn = document.getElementById("yuanEvent"); 
 //addEventListener：綁定函數(shù) 
 btn.addEventListener("click",eventOne); 
 btn.addEventListener("click",eventTwo); 
}

輸出：第一個(gè)監(jiān)聽(tīng)事件和第二個(gè)監(jiān)聽(tīng)事件

2、采用事件監(jiān)聽(tīng)給對(duì)象綁定方法后，可以解除相應(yīng)的綁定，寫(xiě)法如下：

var eventOne = function(){ 
 alert("第一個(gè)監(jiān)聽(tīng)事件"); 
} 
function eventTwo(){ 
 alert("第二個(gè)監(jiān)聽(tīng)事件"); 
} 
window.onload = function(){ 
 var btn = document.getElementById("yuanEvent"); 
 btn.addEventListener("click",eventOne); 
 btn.addEventListener("click",eventTwo); 
 btn.removeEventListener("click",eventOne); 
}

輸出：第二個(gè)監(jiān)聽(tīng)事件

3、解除綁定事件的時(shí)候一定要用函數(shù)的句柄，把整個(gè)函數(shù)寫(xiě)上是無(wú)法解除綁定的。

錯(cuò)誤寫(xiě)法：

btn.addEventListener("click",function(){ 
 alert(11); 
}); 
btn.removeEventListener("click",function(){ 
 alert(11); 
});

正確寫(xiě)法：

btn.addEventListener("click",eventTwo); 
btn.removeEventListener("click",eventOne);

總結(jié)：對(duì)函數(shù)進(jìn)行封裝后的監(jiān)聽(tīng)事件如下，兼容各大主流瀏覽器。

/* 
 * addEventListener:監(jiān)聽(tīng)Dom元素的事件 
 * 
 * target：監(jiān)聽(tīng)對(duì)象 
 * type：監(jiān)聽(tīng)函數(shù)類型，如click,mouseover 
 * func：監(jiān)聽(tīng)函數(shù) 
 */ 
function addEventHandler(target,type,func){ 
 if(target.addEventListener){ 
  //監(jiān)聽(tīng)I(yíng)E9，谷歌和火狐 
  target.addEventListener(type, func, false); 
 }else if(target.attachEvent){ 
  target.attachEvent("on" + type, func); 
 }else{ 
  target["on" + type] = func; 
 } 
} 
/* 
 * removeEventHandler:移除Dom元素的事件 
 * 
 * target：監(jiān)聽(tīng)對(duì)象 
 * type：監(jiān)聽(tīng)函數(shù)類型，如click,mouseover 
 * func：監(jiān)聽(tīng)函數(shù) 
 */ 
function removeEventHandler(target, type, func) { 
 if (target.removeEventListener){ 
  //監(jiān)聽(tīng)I(yíng)E9，谷歌和火狐 
  target.removeEventListener(type, func, false); 
 } else if (target.detachEvent){ 
  target.detachEvent("on" + type, func); 
 }else { 
  delete target["on" + type]; 
 } 
} 
var eventOne = function(){ 
 alert("第一個(gè)監(jiān)聽(tīng)事件"); 
} 
function eventTwo(){ 
 alert("第二個(gè)監(jiān)聽(tīng)事件"); 
} 
window.onload = function(){ 
 var bindEventBtn = document.getElementById("bindEvent"); 
 //監(jiān)聽(tīng)eventOne事件 
 addEventHandler(bindEventBtn,"click",eventOne); 
 //監(jiān)聽(tīng)eventTwo事件 
 addEventHandler(bindEventBtn,"click",eventTwo ); 
 //監(jiān)聽(tīng)本身的事件 
 addEventHandler(bindEventBtn,"click",function(){ 
  alert("第三個(gè)監(jiān)聽(tīng)事件"); 
 }); 
 //取消第一個(gè)監(jiān)聽(tīng)事件 
 removeEventHandler(bindEventBtn,"click",eventOne); 
 //取消第二個(gè)監(jiān)聽(tīng)事件 
 removeEventHandler(bindEventBtn,"click",eventTwo); 
}

實(shí)例：

<!DOCTYPE html> 
<html> 
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  <title>Event</title> 
  <script type="text/javascript"> 
   function addEventHandler(target,type,func){ 
    if(target.addEventListener){ 
     //監(jiān)聽(tīng)I(yíng)E9，谷歌和火狐 
     target.addEventListener(type, func, false); 
    }else if(target.attachEvent){ 
     target.attachEvent("on" + type, func); 
    }else{ 
     target["on" + type] = func; 
    } 
   } 
   function removeEventHandler(target, type, func) { 
    if (target.removeEventListener){ 
     //監(jiān)聽(tīng)I(yíng)E9，谷歌和火狐 
     target.removeEventListener(type, func, false); 
    } else if (target.detachEvent){ 
     target.detachEvent("on" + type, func); 
    }else { 
     delete target["on" + type]; 
    } 
   } 
   var eventOne = function(){ 
    alert("第一個(gè)監(jiān)聽(tīng)事件"); 
   } 
   function eventTwo(){ 
    alert("第二個(gè)監(jiān)聽(tīng)事件"); 
   } 
   window.onload = function(){ 
    var bindEventBtn = document.getElementById("bindEvent"); 
    //監(jiān)聽(tīng)eventOne事件 
    addEventHandler(bindEventBtn,"click",eventOne); 
    //監(jiān)聽(tīng)eventTwo事件 
    addEventHandler(bindEventBtn,"click",eventTwo ); 
    //監(jiān)聽(tīng)本身的事件 
    addEventHandler(bindEventBtn,"click",function(){ 
     alert("第三個(gè)監(jiān)聽(tīng)事件"); 
    }); 
    //取消第一個(gè)監(jiān)聽(tīng)事件 
    removeEventHandler(bindEventBtn,"click",eventOne); 
    //取消第二個(gè)監(jiān)聽(tīng)事件 
    removeEventHandler(bindEventBtn,"click",eventTwo); 
   } 
  </script> 
 </head> 
 <body> 
  <input type="button" value="測(cè)試" id="bindEvent"> 
  <input type="button" value="測(cè)試2" id="yuanEvent"> 
 </body> 
</html>

PS：這里再為大家提供一個(gè)關(guān)于JS事件的在線工具，歸納總結(jié)了JS常用的事件類型與相關(guān)函數(shù)功能：

javascript事件與功能說(shuō)明大全：

http://tools.jb51.net/table/javascript_event

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: