javascript事件處理程序
阿新 • • 發佈:2017-05-20
跨瀏覽器 包括 document 事件 else if asc 事件處理程序 瀏覽器 操作
IE實現了兩個類似的方法:attachEvent()和detachEvent() ,接受兩個參數。沒有八個bool值 樣例 :
所以 我們這邊也寫了個跨瀏覽器的事件處理程序:
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){ //IE element.detachEvent("on"+type,handler); }else{ element["on"+type]=handler; } } }
javascript事件處理程序