#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. InnoDB Insert Buffer(插入缓冲 转)

    一,插入缓冲(Insert Buffer/Change Buffer):提升插入性能 只对于非聚集索引(非唯一)的插入和更新有效,对于每一次的插入不是写到索引页中,而是先判断插入的非聚集索引页是否在缓 ...

  2. spring的原理

    一.pring的原理 1.1 IOC控制反转 ==> 扫描机制通过代理方式动态创建对象 扫描注解,通过反射获取类路径,动态创建对应类的对象,放置在对象池中(多线程做法,防止短时间内创建对象过多, ...

  3. Python_Tips

    Python绝对路径与相对路径读写文件[上级目录: os.path.dirname(os.getcwd())] # coding:utf8 ''' 知识点:Python读写文件时候的相对路径与绝对路径 ...

  4. Python_案例_斐波那契数

    方法一: 1 #!/usr/bin/python3 2 3 # Fibonacci series: 斐波纳契数列 4 # 两个元素的总和确定了下一个数 5 a, b = 0, 1 6 while b ...

  5. __all__有趣的属性

    python有趣的属性__all__可用于模块导入时限制,如:from module import *此时被导入模块若定义了__all__属性,则只有all内指定的属性.方法.类可被导入:若没定义,则 ...

  6. 《Machine Learning in Action》—— 小朋友,快来玩啊,决策树呦

    <Machine Learning in Action>-- 小朋友,快来玩啊,决策树呦 在上篇文章中,<Machine Learning in Action>-- Taoye ...

  7. 网页中审查元素(按F12)与查看网页源代码的区别

    问题 在验证目标系统是含有XSS漏洞,查看源代码,看不到插入的跨站脚本代码. 原理 所谓查看源代码,就是别人服务器发送到浏览器的原封不动的代码. 审查元素时,你看到那些,在源代码中找不到的代码,是在浏 ...

  8. 上周我面了个三年 Javaer,这几个问题都没答出来

    身为 Java Web 开发我发现很多人一些 Web 基础问题都答不上来. 上周我面试了一个三年经验的小伙子,一开始我问他 HTTP/1.HTTP/2相关的他到是能答点东西出来. 后来我问他:你知道 ...

  9. swupdate实例

    平台:imx8mm 系统:linux 4.4   如果需要系统了解swupdate,请参考文章:嵌入式系统更新swupdate分类   一.制作升级包 emmcsetup.lua用来描述update执 ...

  10. mac中怎么完成移动硬盘分区这个操作

    移动硬盘在出厂时只有一个区,不方便我们存储和查阅文件,移动硬盘分区可以防止硬盘发生错误,以免造成资料丢失,也可以防止产生无用文件. 移动硬盘基本上都是用Windows系统进行分区的,但是现在很多人使用 ...