js移除mousewheel事件removeeventlistener的簡單介紹

本文目錄一覽:

如何通過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

(0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
GSCJ的頭像GSCJ
上一篇 2024-11-01 14:10
下一篇 2024-11-01 14:10

相關推薦

  • JS Proxy(array)用法介紹

    JS Proxy(array)可以說是ES6中非常重要的一個特性,它可以代理一個數組,監聽數據變化並進行攔截、處理。在實際開發中,使用Proxy(array)可以方便地實現數據的監…

    編程 2025-04-29
  • Python簡單數學計算

    本文將從多個方面介紹Python的簡單數學計算,包括基礎運算符、函數、庫以及實際應用場景。 一、基礎運算符 Python提供了基礎的算術運算符,包括加(+)、減(-)、乘(*)、除…

    編程 2025-04-29
  • Python滿天星代碼:讓編程變得更加簡單

    本文將從多個方面詳細闡述Python滿天星代碼,為大家介紹它的優點以及如何在編程中使用。無論是剛剛接觸編程還是資深程序員,都能從中獲得一定的收穫。 一、簡介 Python滿天星代碼…

    編程 2025-04-29
  • Python海龜代碼簡單畫圖

    本文將介紹如何使用Python的海龜庫進行簡單畫圖,並提供相關示例代碼。 一、基礎用法 使用Python的海龜庫,我們可以控制一個小海龜在窗口中移動,並利用它的“畫筆”在窗口中繪製…

    編程 2025-04-29
  • 解析js base64並轉成unit

    本文將從多個方面詳細介紹js中如何解析base64編碼並轉成unit格式。 一、base64編碼解析 在JavaScript中解析base64編碼可以使用atob()函數,它會將b…

    編程 2025-04-29
  • Node.js使用Body-Parser處理HTTP POST請求時,特殊字符無法返回的解決方法

    本文將解決Node.js使用Body-Parser處理HTTP POST請求時,特殊字符無法返回的問題。同時,給出一些相關示例代碼,以幫助讀者更好的理解並處理這個問題。 一、問題解…

    編程 2025-04-29
  • Python櫻花樹代碼簡單

    本文將對Python櫻花樹代碼進行詳細的闡述和講解,幫助讀者更好地理解該代碼的實現方法。 一、簡介 櫻花樹是一種圖形效果,它的實現方法比較簡單。Python中可以通過turtle這…

    編程 2025-04-28
  • t3.js:一個全能的JavaScript動態文本替換工具

    t3.js是一個非常流行的JavaScript動態文本替換工具,它是一個輕量級庫,能夠很容易地實現文本內容的遞增、遞減、替換、切換以及其他各種操作。在本文中,我們將從多個方面探討t…

    編程 2025-04-28
  • Python大神作品:讓編程變得更加簡單

    Python作為一種高級的解釋性編程語言,一直被廣泛地運用於各個領域,從Web開發、遊戲開發到人工智能,Python都扮演着重要的角色。Python的代碼簡潔明了,易於閱讀和維護,…

    編程 2025-04-28
  • 抖音外放親媽下葬事件的背後真相

    近期,一段抖音外放親媽下葬的視頻引發廣泛關注和熱議。不少人對這個事件感到震驚和憤怒,認為這種行為非常不尊重親人,觸犯了社會公德和家庭道德。但是,事情真相到底是什麼呢?我們有必要從多…

    編程 2025-04-28

發表回復

登錄後才能評論