點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

JavaScript中的事件如何進行綁定與解除

來源：懂視網責編：小采時間：2020-11-27 19:29:05

JavaScript中的事件如何進行綁定與解除

JavaScript中的事件如何進行綁定與解除:本文將分享有關JavaScript事件的綁定與解除，有一定的參考價值，希望對大家有所幫助JavaScript中的事件表示當我們點擊某個 HTML 元素時啟動一段 JavaScript，從而觸發瀏覽器的行為，我們常常需要用到事件的綁定，接下來將和大家詳細分享幾種常見的事件綁定方

推薦度：

點擊下載本文 文檔為doc格式

導讀JavaScript中的事件如何進行綁定與解除:本文將分享有關JavaScript事件的綁定與解除，有一定的參考價值，希望對大家有所幫助JavaScript中的事件表示當我們點擊某個 HTML 元素時啟動一段 JavaScript，從而觸發瀏覽器的行為，我們常常需要用到事件的綁定，接下來將和大家詳細分享幾種常見的事件綁定方

本文將分享有關JavaScript事件的綁定與解除，有一定的參考價值，希望對大家有所幫助

JavaScript中的事件表示當我們點擊某個 HTML 元素時啟動一段 JavaScript，從而觸發瀏覽器的行為，我們常常需要用到事件的綁定，接下來將和大家詳細分享幾種常見的事件綁定方法以及如何解除綁定

事件綁定

onclick事件

指鼠標按下時對象被觸發，一個元素只能綁定一個事件

當鼠標點擊方塊時改變它的背景顏色

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

效果圖

點擊前

Image 2.jpg

點擊后

Image 1.jpg

addEventListener(event, function, useCapture)

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

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

function:指事件觸發時所執行的函數

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

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

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

attachEvent(event, function)

一個事件可以綁定多個處理程序，同一個函數也可以綁定多次是IE 獨有的

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

function:指事件觸發時所執行的函數

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

注意：程序的運行一定要在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事件，注意在解除綁定時不能直接寫function，要將函數寫在外部

 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綁定一個click事件，當點擊時使背景顏色改變

detachEvent(event, function)

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

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

總結：

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JavaScript中的事件如何進行綁定與解除

推薦度：

點擊下載本文 文檔為doc格式

標簽：綁定事件 js

熱門焦點

JavaScript中的事件如何進行綁定與解除

JavaScript中的事件如何進行綁定與解除

JavaScript中的事件如何進行綁定與解除

最新推薦

猜你喜歡

熱門推薦