原生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 ...
随机推荐
- fork系统调用关于如何让子进程先运行{wait(),waitpid(),sleep()}
在父进程里面调用wait()和waitpid()可以确保子进程先运行,因为当子进程运行完后会变成僵尸进程,此时会发送一个信号给父进程,父进程接受到信号才会运行. 有人或许会问如果在父进程调用wait之 ...
- 无需开发,IT事件接入钉钉的方法详解
1.市场在拥抱钉钉 虎嗅8月30日发表了一篇文章<为什么有很多企业沉迷钉钉无法自拔>,有兴趣的可以去看看,下附文章链接. 文章不短,其中有一部分阐述了:钉钉抓住以人为核心的"智能 ...
- kafka数据一致性(HW只能保证副本之间的数据一致性,并不能保证数据不丢失ack或者不重复。)
数据一致性问题:消费一致性和存储一致性 例如:一个leader 写入 10条数据,2个follower(都在ISR中),F1.F2都有可能被选为Leader,例如选F2 .后面Leader又活了.可能 ...
- 1. 线性DP 152. 乘积最大子数组
152. 乘积最大子数组 https://leetcode-cn.com/problems/maximum-product-subarray/ func maxProduct(nums []int) ...
- VGA详解及色块碰撞示例
引言 VGA:video Graphics array,视频图形阵列,阴极射线显像管(CRT)显示器时代产物,很多老显卡.笔记本电脑.投影仪所用接口,已经比较过时. CRT是模拟设备,所以VGA也采用 ...
- 用JavaScript做精灵图
用JavaScript做精灵图 精灵图可以不用在给每一个小块一 一的修改位置.主要原理是找到整张的背景图与li的下标的数学关系. 这是一大张背景图,这个背景图的位置其实是有规律的,每两张之间间隔一个固 ...
- Mysql的下载,安装,远程连接,密码加密规则修改。
第一次接触mysql,,很多地方不懂,出了很多问题.本来应该在Linux系统中安装mysql的,但是奈何各种电脑限制,所以在公司电脑的Windows service R2 系统上装了mysql数据库. ...
- exec() has been disabled for security reasons
1.修改php.ini里面:disable_functions 2.重启服务器 2.如果是虚拟机,就重启虚拟机
- Cypress系列(90)- Cypress.Cookies 命令详解以及如何跨测试用例共享 Cookies
如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html Cypress.Cookies 共有三个 ...
- 太妙了!Spring boot 整合 Mybatis Druid,还能配置监控?
Spring boot 整合 Mybatis Druid并配置监控 添加依赖 <!--druid--> <dependency> <groupId>com.alib ...