Js为什么解除不掉事件绑定?
我们先来谈一下注册事件的方式:
1、传统注册事件
即利用各种on开头的事件,例如onclick、onmousedown、onmouseover、onmousemove、onmouseup等等诸如此类的事件,我们都会用以下代码块来对某些dom元素进行注册事件:
btns[0].onclick = function() {console.log(1);
}
btns[0].onmousedown= function() {console.log(1);
}
btns[0].onmouseup= function() {console.log(1);
}
btns[0].onmouseover= function() {console.log(1);
}
这一类事件设置具有唯一性:例如,一个dom元素只能通过这种方式绑定一个onclick事件,当我想在以后再添加一些操作时,只会执行最后添加的那个onclick事件的回调函数。
例如下面代码:
btns[0].onclick = function() {console.log(1);
}
btns[0].onclick = function() {console.log(2);
}
执行结果如下:
可以看出第一次的onclick事件被第二次的覆盖掉了,所以咋控制台只打印出了第二个点击事件的2。
2、方法监听事件
此方法依靠addEventListener();是一个方法。但与传统注册事件不同的是:同一个元素同一个事件可以装载多个监听器,并且会按照注册的顺序依次执行。
例如下面代码:
btns[0].addEventListener('click',function() {console.log(1);
})
btns[0].addEventListener('click',function() {console.log(2);
})
执行结果为:
可以看到,第一次和第二次点击事件的回调函数全部都执行了,控制台按照注册事件的顺序依次执行了回调函数的内容。
说完了注册函数的方法和异同,下面就来说一下怎么样才能够清除函数吧!
3、解除传统注册事件的绑定
使用这种格式的函数既可以解除事件的绑定:evenTarget.onclick. = null;
evenTarget表示你所要解绑的dom元素,而后面的onclick则是代表你所要解绑的事件类型,例如onclick、onmousedown等等,最后只需让他们等于null即可实现解除绑定的功能。
btns[0].onclick = function() {console.log(1);btns[0].onclick = null;//解除绑定事件
}
这样我多次点击按钮想要在控制台输出1的时候,最多就只能输出一个1。因为第一次点击完按钮后,该按钮的点击事件就被清除了。
4、方法监听事件解除绑定的方法:
此时要依靠这种方式来解除事件:evenTarget.removeEventListener()
与消除传统注册事件的不同点就在于如果你想消除一个事件,那么你就必须要实现创造一个函数,注册的事件和要消除哪个事件是通过这个函数来进行辨认的。
function fn() {console.log(1);btns[0].removeEventListener('click',fn)
}btns[0].addEventListener('click',fn)
这和上面得到的结果是一样的,结果如下图所示:
对解除事件绑定更深层次的研究:
btns[0].onclick = function() {console.log(1);btns[1].onclick = function() {console.log(2);}
}
btns[2].onclick = function() {btns[0].onclick = null;btns[1].onclick = null;
}
相信这个代码大家并不难看懂,大致意思为点击第一个按钮后再控制台输出1,点击第二个按钮在控制台输出2,点击第三个按钮之后则解除前面两个点击事件的绑定。
结果如下图所示:
点击第三个按钮后,再点击第一个和第二个按钮控制台将不会在有输出。
那如果换一种清除事件的方式会怎么样呢?
function fn1() {console.log(1);btns[1].addEventListener('click',fn2)
}function fn2() {console.log(2);
}btns[0].addEventListener('click',fn1)btns[2].addEventListener('click',function() {btns[0].removeEventListener('click',fn1)btns[1].removeEventListener('click',fn2)})
可以看到这种方式比上一种方式要麻烦很多,因为每个事件都需要对应一个函数,等要清除的事件多了,可能就会有点眼花缭乱,并且这里有个很容易犯的错误,就是大多数新手可能会认为只要清除了作用域比较大的那个事件就可以了,其实不然,因为小作用域的事件可能早被添加到了异步执行队列中去,在后续的检查中,很容易会让人产生解除事件绑定失败的错觉,所以这里还是建议在面对清除多个事件的时候还是选择第传统注册事件的方法。
Js为什么解除不掉事件绑定?相关推荐
- JQuery对象和JS对象区别与转换|| 事件绑定 入口函数 样式控制
JQuery对象和JS对象区别与转换 1. JQuery对象在操作时,更加方便. 2. JQuery对象和js对象方法不通用的. 3. 两者相互转换 * jq -- ...
- js第13天(事件绑定方式)
目录 前言 1.DOM0级方式 2.DOM2级方式 3.绑定方式的优缺点 4.事件解绑 二.事件的执行机制 1.事件对象 2.事件目标对象 三.事件传播 四.事件委托 1)原理:事件冒泡实现 2)事件 ...
- 为元素绑定多个相同事件 绑定事件的另一种方式 复习 介绍 元素的事件绑定
为元素绑定多个相同事件 <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
- 关于事件模型,js事件绑定和解除的学习
http://www.cnblogs.com/iyangyuan/p/4190773.html 原文的例子通俗易懂,很适合学习.主要讲了dom0和dom2的事件模型,以及捕获和冒泡,事件绑定和解除事件 ...
- JavaScript解除事件绑定处理程序 js事件绑定解除
//参考 https://mp.csdn.net/postedit/90524536 JavaScript 事件绑定 封装一个兼容性事件绑定方法应需求有时候事件绑定触发后就要接触事件. 解除事件绑定方 ...
- JS中事件绑定的方式以及事件监听和事件的委托
在javascript中,到我目前的学习中总结得到的认知是在事件触发阶段主要是由于事件流: 我们在HTML中先设置一个div: <div class="box">< ...
- [JQuery 学习笔记] 解除事件绑定 unbind()
unbind() : 解除事件绑定 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
- js事件委托和jQuery事件绑定on , off , one , bind , unbind , die
一. 事件委托 什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这 100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生. 而在jQuery ...
- 事件绑定及解除事件绑定
事件绑定的方式 1) ele.onXXX = function(event) {}this 指向 dom 2) ele.addEventListener(type, fn, false);一个事件可以 ...
最新文章
- SpringJpa多对多映射关系
- 视频演示:高颜值免费在线绘图ImageGP
- 4.3.6 无分类编址CIDR
- Orchard CMS前台页面为什么没有Edit链接?
- HDU - 2732 Leapin' Lizards(最大流+思维建边)
- stata中心化处理_带有stata第2部分自定义配色方案的covid 19可视化
- 洛谷T1967 货车运输 Kruskal最大生成树倍增LCA
- java 漏洞挖掘_Java反序列化漏洞的挖掘、攻击与防御
- 前端人员必须掌握哪些技术?常见缓存种类有什么?
- vmware虚拟化服务器cpu超线程,VMware vSphere的配置方法最佳方案从而提高性能
- 使用CodeFirst创建数据库
- python总是下载失败_Python 下载依赖包环境经常失败超时解决方法
- android 集成x5内核时 本地没有,腾讯X5内核集成一些建议和爬坑记录
- Aspose.word保存PDF时进行授权访问设置
- 使用GitHub搭建个人博客
- 台北故宫博物院收藏:气势开张,米芾行草书法真迹《真酥帖》赏析
- 不同型号阵列卡相关工具的使用简介
- Holy Grail————计蒜客
- 杭州-SQL杭州国迈软件有限公司笔试题
- R新建空矩阵循环放数据