javascript 事件處理程序

1、普通事件處理程序

<input type="button" value="click me" οnclick="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.οnclick=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;}}}

轉載于:https://www.cnblogs.com/gavanwanggw/p/6882930.html

總結

以上是生活随笔為你收集整理的javascript事件处理程序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。