本文目錄一覽:
- 1、如何通過js實現添加事件監聽和移除事件監聽
- 2、js如何清除所有綁定的事件
- 3、js添加事件和移除事件:addEventListener()與removeEventListener()
- 4、js怎麼移除所有綁定的事件
如何通過js實現添加事件監聽和移除事件監聽
直接用js實現比較麻煩,不同版本的瀏覽器(主要是低版本的)支持的方法會不一樣。
建議使用jquery實現:
添加事件例:
$(“button”).on(“click”, function(){
console.log(“clicked”);
});
移除事件例:
$(“button”).off(“click”);
文檔鏈接:
js如何清除所有綁定的事件
1.addEventListener()與removeEventListener()用於處理指定和刪除事件處理程序操作;
2.所有的DOM節點中都包含這兩種方法,並且它們都接受3個參數:要處理的事件名、作為事件處理程序的函數和一個布爾值。最有這個布爾值參數是true,表示在捕獲階段調用事件處理程序;如果是false,表示在冒泡階段調用事件處理程序;
3.由於IE只支持事件冒泡,所以同大多數情況下,都是將事件處理程序添加到事件流的冒泡階段,這樣可以最大限度地兼容各種瀏覽器;
最好只在需要在是事件到達目標之前截獲它的時候將事件處理程序添加到捕獲階段。如果不是特別需要,不建議在事件捕獲階段註冊事件處理程序。
js添加事件和移除事件:addEventListener()與removeEventListener()
addEventListener()與removeEventListener()用於處理指定和刪除事件處理程序操作。
它們都接受3個參數:如 addEventListener(“事件名” , “事件處理函數” , “布爾值”); (註:事件名不含”on”,如“click”) 現在的版本可以省略第三個參數,默認值為false
通過addEventListener()添加的事件處理程序只能使用removeEventListener()來移除;移除時傳入的參數與添加處理程序時使用的參數相同。這也意味着通過addEventListener()添加的匿名函數無法移除
這個例子中,使用addEventListener()添加一個事件處理程序。雖然調用removeEventListener(0是看似使用了相同的參數,但實際上,第二個參數與傳入addEventListener()中的那一個完全不同的函數。而傳入removeEventListener()中的事件處理程序函數必須與傳addEventListener()中的相同
重寫後的這個例子在addEventListener()和removeEventListener()中用的是相同的函數。
1:相同事件綁定和解除,需要使用共用函數;綁定和解除事件時 事件沒有”on” 即onclick寫成click
2:共用函數不能帶參數;
布爾值參數是true,表示在捕獲階段調用事件處理程序;就是最不具體的節點先接收事件,最具體的節點最後接收事件
js怎麼移除所有綁定的事件
addEventListener()與removeEventListener()用於處理指定和刪除事件處理程序操作。所有的DOM節點中都包含這兩種方法,並且它們都接受3個參數:要處理的事件名、作為事件處理程序的函數和一個布爾值。最有這個布爾值參數是true,表示在捕獲階段調用事件處理程序;如果是false,表示在冒泡階段調用事件處理程序。
!DOCTYPE html
html
head
meta charset=”utf-8″ /
title搖一搖/title
/head
script
document.addEventListener(“mousedown”, mouse, false);//點擊鼠標時觸發事件
document.addEventListener(“keydown”, key, false);//按下鍵盤按鍵時觸發事件
function mouse(){
alert(‘ddd’);
}
function key(){
document.removeEventListener(“mousedown”, mouse, false);
alert(‘xxx’);
}
/script
body
/body
/html
原創文章,作者:GSCJ,如若轉載,請註明出處:https://www.506064.com/zh-hant/n/147536.html