js移除事件實例,js增加和刪除事件

本文目錄一覽：

• 1、js怎麼移除所有綁定的事件
• 2、js添加事件和移除事件:addEventListener()與removeEventListener()
• 3、如何通過js實現添加事件監聽和移除事件監聽
• 4、js如何清除所有綁定的事件
• 5、js怎樣清除點擊事件
• 6、vue.js怎樣移除綁定的點擊事件

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

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實現添加事件監聽和移除事件監聽

直接用js實現比較麻煩，不同版本的瀏覽器（主要是低版本的）支持的方法會不一樣。

建議使用jquery實現：

添加事件例：

$(“button”).on(“click”, function(){

    console.log(“clicked”);

});

移除事件例：

$(“button”).off(“click”);

文檔鏈接：

js如何清除所有綁定的事件

1.addEventListener()與removeEventListener()用於處理指定和刪除事件處理程序操作；

2.所有的DOM節點中都包含這兩種方法，並且它們都接受3個參數：要處理的事件名、作為事件處理程序的函數和一個布爾值。最有這個布爾值參數是true，表示在捕獲階段調用事件處理程序；如果是false，表示在冒泡階段調用事件處理程序；

3.由於IE只支持事件冒泡，所以同大多數情況下，都是將事件處理程序添加到事件流的冒泡階段，這樣可以最大限度地兼容各種瀏覽器；

最好只在需要在是事件到達目標之前截獲它的時候將事件處理程序添加到捕獲階段。如果不是特別需要，不建議在事件捕獲階段註冊事件處理程序。

js怎樣清除點擊事件

可以設置點擊事件函數為空函數，即「onclick=function(){}」。

也可以移除事件指派或移除onclick事件屬性，jquery當中可以用unbind方法移除。

vue.js怎樣移除綁定的點擊事件

vue.js移除綁定的點擊事件的方法：

可以用 v-on 指令監聽 DOM 事件：

div id=”example”

button v-on:click=”greet”Greet/button

/div

綁定了一個單擊事件處理器到一個方法 greet。下面在 Vue 實例中定義這個方法：

var vm = new Vue({

el: ‘#example’,

data: {

name: ‘Vue.js’

},

// 在 `methods` 對象中定義方法

methods: {

greet: function (event) {

// 方法內 `this` 指向 vm

alert(‘Hello ‘ + this.name + ‘!’)

// `event` 是原生 DOM 事件

alert(event.target.tagName)

}

}

})

// 也可以在 JavaScript 代碼中調用方法

vm.greet() // – ‘Hello Vue.js!’