原生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 ...
随机推荐
- 在 JavaScript 中,我们能为原始类型添加一个属性或方法吗?
原始类型的方法 JavaScript 允许我们像使用对象一样使用原始类型(字符串,数字等).JavaScript 还提供了这样的调用方法.我们很快就会学习它们,但是首先我们将了解它的工作原理,毕竟原始 ...
- SNMP介绍及使用,超有用,建议收藏!
写在前面 如果你是对SNMP完全不了解,或者只想学习如何使用现成的SNMP工具,那你找对了文章,但如果你希望学习SNMP具体协议内容,推荐阅读官方的RFC文档. 1. 简介 SNMP(Simple N ...
- Docker学习—Swarm
前言: 前一篇<Docker学习-Machine>中对Machine 进行了学习,本篇继续学习Swarm,那么Swarm是什么呢,有什么用呢?接下来一步步了解. 一.什么是Docker-S ...
- CTF练习(1)这是一张单纯的图片?
1.练习平台http://123.206.31.85/challenges 2.图片下载后放进WInhex 最后安利一个 CTF资源库|CTF工具包|CTF工具集合 网站,里面工具很全,很方便 ...
- DWVA-XSS部分练手闯关
前言 关于XSS基础内容请查看:https://www.cnblogs.com/xhds/p/12239527.html 实验平台采用DWVA v1.10 XSS(Reflected)反射性XSS漏 ...
- nginx转发php文件到php-fpm服务器提示502错误
实验将php文件转发给另一个php-fpm服务器处理的时候,出现了502错误: 检查了nginx错误日志,提示: 2019/08/25 17:54:56 [error] 4742#0: *35 rec ...
- 遇到 ''isSort()''declared here, later in the translation unit
在编写代码时,遇到 在原来的代码中出现这个问题 原来的代码: //3 计算排序时间 template<typename T> void testSort(string sortName, ...
- 如何在Camtasia中对录制视频进行动画编辑
生活中,我们时时会遇到要剪辑视频不知道哪一款软件比较简单:当我们想要录制电脑屏幕时,网上的方法也总是不奏效.那是否有一款软件可以同时兼备这两种功能呢?今天我给大家推荐的便是一款同时兼备这两种功能的软件 ...
- CorelDRAW不同选择工具的作用及用法汇总
在CorelDRAW中,"选择工具"是我们的好助手之一."选择工具"图标位于CDR界面左边的工具箱中.使用鼠标单击图标右下角的小三角,我们可以看到"选 ...
- Folx专业版任务计划功能详解
Folx专业版的任务计划功能允许用户以时间表的方式,制定下载计划.按照预先设定的时间计划,Folx会在指定的时间段内,自动开启或停止下载任务. 另外,用户还可以设置自动关机功能.当计划下载任务停止时, ...