javascript 刪除dom對象的事件函數代碼

2019-11-21 00:32:31

字體：大中小

來源：轉載

供稿：網友

JS添加/刪除事件在IE和支持dom瀏覽器分別為：attachEvent（ie中的添加事件），detachEvent（ie中的刪除事件），addEventListener（支持dom瀏覽器中的添加事件），removeEventListener（支持dom瀏覽器中的刪除事件）。

例如第一次點擊黑色區域的時候彈出警告，并移除click事件，也就是第二次再點擊的時候就沒反應了，整合代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>添加刪除事件</title> <script type="text/javascript"> var EventUtil=new Object; //oTarget：目標；sEventType：事件名稱；funName：事件觸發的函數名； EventUtil.addEvent=function(oTarget,sEventType,funName){ //document.getElementById("dd").attachEvent if(oTarget.addEventListener){//for DOM; oTarget.addEventListener(sEventType,funName, false); }else if(oTarget.attachEvent){ oTarget.attachEvent("on"+sEventType,funName); }else{ oTarget["on"+sEventType]=funName; } }; EventUtil.removeEvent=function(oTarget,sEventType,funName){ //document.getElementById("dd").attachEvent if(oTarget.removeEventListener){//for DOM; oTarget.removeEventListener(sEventType,funName, false); }else if(oTarget.detachEvent){ oTarget.detachEvent("on"+sEventType,funName); }else{ oTarget["on"+sEventType]=null; } }; function removeClick(){ alert("click"); var oDiv=document.getElementById("odiv"); oDiv.style.cursor="auto"; EventUtil.removeEvent(oDiv,"click",removeClick); } //----多個函數綁定到window.onload上------// function addLoadEvent(func){ var oldonload=window.onload; if(typeof window.onload !="function"){ window.onload=func; }else{ window.onload=function(){ oldonload(); func(); } } } addLoadEvent(addClick); function addClick(){ var oDiv=document.getElementById("odiv"); oDiv.style.cursor="pointer"; EventUtil.addEvent(oDiv,"click",removeClick); } </script> </head> <body> <p>第一次點擊黑色區域的時候彈出警告，并移除click事件，也就是第二次再點擊的時候就沒反應了</p> <div   class="iwvjtn8m0"   id="odiv" style="background:#333; height:100px; width:100px; margin:0 auto; color:#CDCDCD; ">第一次點我警告你，第二次點我不理你！</div> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：JQuery contains的選擇器

下一篇：Jquery操作radio,checkbox,select表單操作實現代碼