#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之事件解绑的更多相关文章

  1. JS里关于事件的常被考察的知识点:事件流、事件广播、原生JS实现事件代理

    1.JS里面的事件流 DOM2级事件模型中规定了事件流的三个阶段:捕获阶段.目标阶段.冒泡阶段,低版本IE(IE8及以下版本)不支持捕获阶段 捕获事件流:Netscape提出的事件流,即事件由页面元素 ...

  2. 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对象) ...

  3. JQuery的事件委托;jQuery注册事件;jQuery事件解绑

    一.事件 ①事件委托:就是给子元素的父元素或者祖先元素注册一个事件,但是事件的执行者是子元素,委托事件的好处是能够给动态创建出来时元素也加上事件. ②简单事件:就是给自己注册事件自己执行动态创建出来的 ...

  4. js绑定事件和解绑事件

    在js中绑定多个事件用到的是两个方法:attachEvent和addEventListener,但是这两个方法又存在差异性 attachEvent方法  只支持IE678,不兼容其他浏览器 addEv ...

  5. 点击事件解绑unbind

    $(".choose").unbind("click").click(function(){} 这个类先解绑了点击事件再添加个点击事件有事如果不这样你点击第二次 ...

  6. 原生JS添加事件方法

    事件 事件添加方式 EvenTarget.addEventListener(EvenName, functionName, option); EventName: example => clic ...

  7. (二)原生JS实现 - 事件类方法

    事件处理 - 添加事件 var addEventHandler = function (oTarget, sEventType, fnHandler) { if (oTarget.addEventLi ...

  8. jquery绑定事件,解绑事件

    unbind([type],[data]) 是 bind()的反向操作,从每一个匹配的元素中删除绑定的事件.如果没有参数,则删除所有绑定的事件.你可以将你用bind()注册的自定义事件取消绑定.如果提 ...

  9. JS添加事件和解绑事件:addEventListener()与removeEventListener()

    作用: addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作. 它们都接受3个参数:事件名.事件处理的函数和布尔值. 布尔值参数是true ...

随机推荐

  1. 1、线性DP 198. 打家劫舍

    198. 打家劫舍 https://leetcode-cn.com/problems/house-robber/ //dp动态规划,dp[i] 状态表示0-i家的盗的得最大值.那么dp[i] = (d ...

  2. 接口自动化测试:apiAutoTest使用re 处理数据依赖

    目录 废话 2020/11/19 参数依赖 更新后的效果 新版依赖数据如何使用 源码地址 道谢 废话 目前在工作中写脚本的时候发现了一些之前开源的apiAutoTest的可优化项,后面应该也是会慢慢的 ...

  3. JavaScript监听页面可见性(焦点)同时改变title的三种方法

    JavaScript监听页面可见性(焦点)同时改变title的三种方法 本文参考了https://developer.mozilla.org/zh-CN/docs/Web/API/Page_Visib ...

  4. 精尽 MyBatis 源码分析 - MyBatis 初始化(三)之 SQL 初始化(上)

    该系列文档是本人在学习 Mybatis 的源码过程中总结下来的,可能对读者不太友好,请结合我的源码注释(Mybatis源码分析 GitHub 地址.Mybatis-Spring 源码分析 GitHub ...

  5. First day,beginning!

    beginning 在闲暇的时光记录当下的生活,一直是自己所期盼的: 由于种种原因(懒惰),一直未能开始,那么就从今天开始吧! 看下日期,从实习到现在一个月刚刚好: 公司很不错,师傅特别好,感觉自己是 ...

  6. Improving Commonsense Question Answering by Graph-based Iterative Retrieval over Multiple Knowledge Sources —— 基于多知识库迭代检索的常识问答系统

    基于多知识库迭代检索的问答系统 论文地址 背景 常识问答任务需要引入外部知识来帮助模型更好地理解自然语言问题,现有的解决方案大都采用两阶段框架: 第一阶段 -- 从广泛的知识来源中找到与给定问题相关的 ...

  7. zabbix agent 编译安装

    zabbix 安装包下载地址 https://www.zabbix.com/download 解压好之后进入zabbix目录 执行编译安装 ./configure --prefix=/usr/loca ...

  8. linux配置tomcat项目包

    安装配置tomcat 操作系统:  centos 7.1 使用模式:命令模式 使用工具:xshell5 .xftp5 注意之前有配置过tomcat需要进行以下4个步骤 1.关闭网管服务 输入命令: 进 ...

  9. [TroubleShootting]Zabbix数据采集出现断点的问题

    背景 最近发现公司的Zabbix监控大屏上的监控图经常出现数据断点的现象,主要集中在一些自定义的监控项数据上,如下图: 原因 查看Zabbix Server日志以及zabbix官方手册后,分析可能原因 ...

  10. Java + maven + httpclient + testng + poi实现接口自动化

    一.maven中引入httpclient.testng.poi依赖包 <project xmlns="http://maven.apache.org/POM/4.0.0" x ...