javascript事件處理常式

標籤：tac   瀏覽器   element   bool   刪除   value   inpu   應該   實用   

javascript 事件處理常式1、普通事件處理常式     

<input  type="button" value="click me" onclick="showMessage()"  /> 

function showMessage(){alert("clicked");}

2、DOMO 級事件處理常式

 <span style="white-space:pre"></span>//老方法 var btn=document.getElementById("myBtn"); //dom擴充方法 支援主流瀏覽器，相似jquery文法     var btn=document.querySelector("#myBtn");     btn.onclick=function(){     alert("clicked!");     };

3、DOM2 級事件處理常式    主要介紹這個。上面兩個大家應該都非常熟悉了。DOM2事件處理常式定義了兩個方法,用於加入和刪除事件處理常式操作:addEventListener() 和 removeEventListener()     全部DOM節點都包括這兩個方法，他們有3個參數  ：要處理的事件名、函數 、布爾值（true捕獲階段運行，false冒泡階段運行），一般填false     範例：   

 var btn=document.getElementById("myBtn"); btn.addEventListener("click",function(){ alert("clicked!"); },false);

 //傳入removeEventListener 的參數必須和addEventListener 一樣 btn.removeEventListener("click",function(){ //這裡不會運行 沒實用-- alert("clicked!"); },false);

  IE實現了兩個類似的方法：attachEvent()和detachEvent()  ，接受兩個參數。沒有八個bool值  範例 ：

  var btn=document.getElementById("myBtn");     btn.attachEvent("onclick",function(){     alert("clicked");     });

     btn.detachEvent("onclick",function(){     alert("clicked");     });

所以 我們這邊也寫了個跨瀏覽器的事件處理常式：

//跨瀏覽器 事件處理常式var EventUtil= {addHandler:function(element,type,handler){if(element.addEventListener){element.addEventListener(type,handler,false);}else if(element.attachEvent){element.attachEvent("on"+type,handler);}else{element["on"+type]=handler;}},removeHandler:function(element,type,handler){if(element.removeEventListener){//除IE 其它element.removeEventListener(type,handler,false);}else if(element.detachEvent){//IEelement.detachEvent("on"+type,handler);}else{element["on"+type]=handler;}}}

javascript事件處理常式