原生js之事件解绑
#removeEventListener
##html
<button id='btn'>click</button>
##js
###第一种方式(错误方式)
var btn = document.getElementById("btn");
//绑定事件
btn.addEventListener('click', function () {
console.log('click btn')
})
//解除绑定,调试发现不可用
btn.removeEventListener('click', function () {
console.log('remove')
})
###第二种方式(正确方式)
var btn = document.getElementById("btn");
function btnHandler() {
console.log('click btn')
}
//绑定事件
btn.addEventListener('click', btnHandler)
//解除绑定(可以成功,第一种不成功是因为回调是两个不同的函数,指向了不同的内存,第二种把回调定义到外面,两次的回调是同一个函数)
btn.removeEventListener('click', btnHandler)
原生js之事件解绑的更多相关文章
- JS里关于事件的常被考察的知识点:事件流、事件广播、原生JS实现事件代理
1.JS里面的事件流 DOM2级事件模型中规定了事件流的三个阶段:捕获阶段.目标阶段.冒泡阶段,低版本IE(IE8及以下版本)不支持捕获阶段 捕获事件流:Netscape提出的事件流,即事件由页面元素 ...
- jQuery - 03. each、prevaAll、nextAll、获取属性、修改属性attr/val/text()、jq.height/width、offset()./position()./scrol Left/Top 、事件绑定bind、delegate、on、事件解绑、事件对象、多库共存
each 方法 $ ( selector).each(function( index,element) { } ); 参数一表示当前元素在所有匹配元素中的索引号 参数二表示当前元素(DOM对象) ...
- JQuery的事件委托;jQuery注册事件;jQuery事件解绑
一.事件 ①事件委托:就是给子元素的父元素或者祖先元素注册一个事件,但是事件的执行者是子元素,委托事件的好处是能够给动态创建出来时元素也加上事件. ②简单事件:就是给自己注册事件自己执行动态创建出来的 ...
- js绑定事件和解绑事件
在js中绑定多个事件用到的是两个方法:attachEvent和addEventListener,但是这两个方法又存在差异性 attachEvent方法 只支持IE678,不兼容其他浏览器 addEv ...
- 点击事件解绑unbind
$(".choose").unbind("click").click(function(){} 这个类先解绑了点击事件再添加个点击事件有事如果不这样你点击第二次 ...
- 原生JS添加事件方法
事件 事件添加方式 EvenTarget.addEventListener(EvenName, functionName, option); EventName: example => clic ...
- (二)原生JS实现 - 事件类方法
事件处理 - 添加事件 var addEventHandler = function (oTarget, sEventType, fnHandler) { if (oTarget.addEventLi ...
- jquery绑定事件,解绑事件
unbind([type],[data]) 是 bind()的反向操作,从每一个匹配的元素中删除绑定的事件.如果没有参数,则删除所有绑定的事件.你可以将你用bind()注册的自定义事件取消绑定.如果提 ...
- JS添加事件和解绑事件:addEventListener()与removeEventListener()
作用: addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作. 它们都接受3个参数:事件名.事件处理的函数和布尔值. 布尔值参数是true ...
随机推荐
- 4. Spark在集群上运行
*以下内容由<Spark快速大数据分析>整理所得. 读书笔记的第四部分是讲的是Spark在集群上运行的知识点. 一.Spark应用组件介绍 二.Spark在集群运行过程 三.Spark配置 ...
- 指针常量&常量指针&指向常量的指针常量
搞不懂不吃晚饭 (1)指针常量 指针常量是一个常量,但是是指针修饰的. 格式:int * const p; 例如 int a, b; int * const p = &a;//指针常量 //分 ...
- Linux 网络栈 转载
此文章 来自 http://arthurchiao.art/blog/tuning-stack-rx-zh/ [译] Linux 网络栈监控和调优:接收数据(2016) Published ...
- Spring源码之循环依赖
https://www.cnblogs.com/longy2012/articles/12834762.html https://www.bilibili.com/video/BV1iD4y1o7pM ...
- JavaScript复习大纲
1. HTML.CSS和JavaScript各自在网页设计中的作用. 1.HTML生成结构. 2.CSS样式美化. 3.JavaScript的作用: (1) 操作HTML及CSS,让网页具有动态行为. ...
- 免费|申请谷歌云服务器|msf安装
apt-get install -y wget 参考链接 知乎-免费|申请谷歌云服务器 知乎-免费|申请谷歌云服务器 cnblogs-debian.ubuntu安装metasploit通用方法 谷歌云 ...
- FL Studio通道常规设置
每个通道设置窗口都包含声相.音量.音高和混音音轨等.刚学习FL Studio的同学可能对这些旋钮的功能还不是很了解,所以也就直接导致了不能很好的运用.为了帮助同学进一步熟悉这款软件,小编今天将为大家详 ...
- FL studio系列教程(十二):FL Studio中如何导出音频
在FL Studio中制作好音乐后,最后展现给我们的是一般的音频文件,我们可以通过FL Studio的文件菜单导出最终的文件格式.下面我们就来详细的看一下FL Studio中是如何导出我们想要的音频格 ...
- MGR(MySQL Group Replication)部署测试
1. 环境说明 192.168.11.131 mgr1 主节点 192.168.11.132 mgr2 从节点 192.168.11.133 mgr3 从节点 2. 在mgr1.mgr2.mgr3上安 ...
- pytest和unittest中参数化如何做
参数化应用场景,一个场景的用例会用到多条数据来进行验证,比如登录功能会用到正确的用户名.密码登录,错误的用户名.正确的密码,正确的用户名.错误的密码等等来进行测试,这时就可以用到框架中的参数化,来便捷 ...