#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. 获取元素计算样式getComputedStyle()与currentStyle

    window.getComputedStyle()方法是标准化接口,返回一个对象,该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值. 私有的CSS属性值可以通过对 ...

  2. MySQL慢查询开启、日志分析(转)

    说明 Mysql的查询讯日志是Mysql提供的一种日志记录,它用来记录在Mysql中响应时间超过阈值的语句 具体指运行时间超过long_query_time值得SQL,则会被记录到慢查询日志中.lon ...

  3. 关于android.view.InflateException【转载】

    在AndroidStudio中编译没有问题,但是运行时会crash,常发生于自定义View的引用.出现问题的原因大致分为以下几种 1.引用View的路径问题:如果自定义的view为CustomerVi ...

  4. Nacos 多环境配置

    本文探讨Nacos作为配置中心,如何实现不同环境(开发.测试.灰度.正式)的配置管理问题 就像Maven用groupId.artifactId.version三者来定位jar包在仓库中的位置一样,Na ...

  5. Python_爬虫_百度图片

    百度图片有些有编码问题,暂时不能爬取,多试几个 #思路:抓取图片地址,根据地址转存图片(注意名称):难点:转码 # -*- coding:utf-8 -*- from urllib import re ...

  6. 设置cmd默认管理员模式启动

    打开cmd文件位置

  7. 推荐系统实践 0x05 推荐数据集MovieLens及评测

    推荐数据集MovieLens及评测 数据集简介 MoiveLens是GroupLens Research收集并发布的关于电影评分的数据集,规模也比较大,为了让我们的实验快速有效的进行,我们选取了发布于 ...

  8. MathType可以和哪些Microsoft Office版本一起使用?

    Office类软件可能是我们碰到电脑后,最先接触到的电脑软件了.尤记得,当初的微机课一开始就会讲word和excel的使用,一开始可能学不太明白,但后来越来越频繁的使用office软件,不说offic ...

  9. Java Bean拷贝工具Orika原理解析

    最近面试被问及对象拷贝怎样才能高效,实际上问的就是Orika或者BeanCopier的原理.由于网上对Orika原理的解析并不太多-因此本文重点讲解一下Orika的原理.(Orika是基于JavaBe ...

  10. 最全总结 | 聊聊 Python 办公自动化之 Word(下)

    1. 前言 关于 Word 文档的读写,前面两篇文章分别进行了一次全面的总结 最全总结 | 聊聊 Python 办公自动化之 Word(上) 最全总结 | 聊聊 Python 办公自动化之 Word( ...