JavaScript中的事件進(jìn)行綁定與解除的方法

小編給大家分享一下JavaScript中的事件進(jìn)行綁定與解除的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

JavaScript中的事件表示當(dāng)我們點(diǎn)擊某個(gè) HTML 元素時(shí)啟動(dòng)一段 JavaScript，從而觸發(fā)瀏覽器的行為，我們常常需要用到事件的綁定，接下來將和大家詳細(xì)分享幾種常見的事件綁定方法以及如何解除綁定

事件綁定

onclick事件

指鼠標(biāo)按下時(shí)對(duì)象被觸發(fā)，一個(gè)元素只能綁定一個(gè)事件

當(dāng)鼠標(biāo)點(diǎn)擊方塊時(shí)改變它的背景顏色

window.onload=function(){
var div=document.getElementsByTagName("div")[0];
div.onclick=function(){
div.style.backgroundColor="pink";
console.log(1);
}
}

addEventListener(event, function, useCapture)

指向指定元素添加事件句柄，可以添加多個(gè)事件，IE9以下不兼容

event:指定事件名，以字符串的形式存在

function:指事件觸發(fā)時(shí)所執(zhí)行的函數(shù)

useCapture:布爾值，說明事件是否在捕獲或者冒泡階段執(zhí)行，其中true代表事件句柄在捕獲階段執(zhí)行，false代表事件句柄在冒泡階段執(zhí)行，其中false代表默認(rèn)值

 window.onload=function(){
   var div=document.getElementsByTagName("div")[0];
     div.addEventListener('click',function(){
     		div.style.backgroundColor="pink";
     },false);
 }//用addEventListener綁定一個(gè)click事件，當(dāng)點(diǎn)擊時(shí)使背景顏色改變

注意：在寫事件時(shí)注意不要寫on,直接寫click大多數(shù)情況下寫false

attachEvent(event, function)

一個(gè)事件可以綁定多個(gè)處理程序，同一個(gè)函數(shù)也可以綁定多次是IE 獨(dú)有的

event：需要綁定的事件的類型，注意要以on開頭

function:指事件觸發(fā)時(shí)所執(zhí)行的函數(shù)

window.onload=function(){
var div=document.getElementsByTagName("div")[0];
 div.attachEvent('onclick',function(){
 div.style.backgroundColor="pink";
     });
 }

注意：程序的運(yùn)行一定要在IE瀏覽器下。

解除事件綁定

onclick =false/null

onclick事件的解綁通過令它的值為false或者為null解除

window.onload=function(){
   var div=document.getElementsByTagName("div")[0];
     div.onclick=function(){
     		div.style.backgroundColor="pink";
     }
     div.onclick=null;

removeEventListener(event, function, useCapture)

用于解除綁定了addEventListener事件，注意在解除綁定時(shí)不能直接寫function，要將函數(shù)寫在外部

 window.onload=function(){
   var div=document.getElementsByTagName("div")[0];
     div.addEventListener('click',demo,false);
     function demo(){
     	div.style.backgroundColor="pink";
     }
     div.removeEventListener('click',demo,false);
 }//用addEventListener綁定一個(gè)click事件，當(dāng)點(diǎn)擊時(shí)使背景顏色改變

detachEvent(event, function)

用于解除attachEvent事件，注意在解除綁定時(shí)不能直接寫function，要將函數(shù)寫在外部

 window.onload=function(){
   var div=document.getElementsByTagName("div")[0];
     div.attachEvent('onclick',demo);
     function demo(){
     	div.style.backgroundColor="pink";
     }
     div.detachEvent('onclick',demo);
     }

以上是JavaScript中的事件進(jìn)行綁定與解除的方法的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！