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!’

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/285755.html