通过addEventListener监听函数实现的dom事件绑定

addEventListener可以为当前dom添加一个事件(这个事件可以是个已有的事件),这就无法避免我们在写代码的时候重复去绑定同一个事件,这时候该想到removeEventListener来取消事件绑定,但是有时候这个办法并不是那么好使,然后的内存释放就更加的不好做到。到头来还是运用ele.onclick=fn,ele.onclick=null,这种办法效果好。

在今天的项目中就遇到一个事件绑定的内存没有被释放掉最后造成了bug,使用addEventListener添加绑定事件,在我自己的代码环境中无法释放内存,当我再次给这个元素绑定一个和之前同样的事件的时候,这个触发器会同事触发两个或者多个事件,最后造成冲突。

事件绑定addEventListener的更多相关文章

  1. JS基础——事件绑定

    上一篇博客JS事件对象中,老师问JS事件处理和VB中的事件处理有什么联系?先来解决一下这个问题.举个VB.net中事件处理的样例(JS敲久了,VB习惯的都不熟悉了,看来得常常回想了): 1.事件处理V ...

  2. 兼容8事件绑定与解绑addEventListener、removeEventListener和ie的attachEvent、detachEvent

    兼容8事件绑定与解绑addEventListener.removeEventListener和ie的attachEvent.detachEvent   ;(function(){ // 事件绑定 bi ...

  3. attachEvent,addEventListener事件绑定

    兼容各主流浏览器的事件绑定(在同一个事件上添加多个处理函数). 1.绑定方法: //IE attachEvent(事件名, 函数) oBtn.attachEvent('onclick', aaa); ...

  4. 监听事件绑定(addEventListener、attachEvent)和移除(removeEventListener、detachEvent)

    /** * @description 事件绑定,兼容各浏览器 * @param target 事件触发对象 * @param type 事件 * @param func 事件处理函数 */ funct ...

  5. Vue - 事件绑定

    1.内联方式: A:将事件处理器绑定到一个方法中,以下所有事件都以click事件作为案例 注意:内联方式下事件处理器只能绑定一个方法,要是想要绑定多个方法,依旧还是使用js中的addEventList ...

  6. jQuery 2.0.3 源码分析 事件绑定 - bind/live/delegate/on

    事件(Event)是JavaScript应用跳动的心脏,通过使用JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应 事件的基础就不重复讲解了,本来是定位源码分析 ...

  7. 深入学习jQuery事件绑定

    × 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...

  8. js事件绑定及深入

    学习要点: 1.传统事件绑定的问题2.W3C事件处理函数3.IE事件处理函数4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现 ...

  9. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

随机推荐

  1. daragrid 简单认识

    @{ ViewBag.Title = "EasyUI"; Layout = null; } <script src="~/jquery-easyui-1.5.5.2 ...

  2. hive建模方法

    转自:https://www.jianshu.com/p/8378b80e4b21 概述数据仓库这个概念是由 Bill Inmon 所提出的,其功能是将组织通过联机事务处理(OLTP)所积累的大量的资 ...

  3. AcWing 101. 最高的牛 (差分) 打卡

    有 NN 头牛站成一行,被编队为1.2.3…N,每头牛的身高都为整数. 当且仅当两头牛中间的牛身高都比它们矮时,两头牛方可看到对方. 现在,我们只知道其中最高的牛是第 PP 头,它的身高是 HH ,剩 ...

  4. WebBug靶场基础篇 — 02

    本篇以第一人称记录这个关卡的第 1-5 关. 由于我记录的过程有点偏向于思考,所以截图截的多 = =!所以文章有点长... 下午一觉醒来,已经 4 点多了,然后开电脑,在虚拟机里,铺了铺靶场,但是毕竟 ...

  5. Python中练习题关于内置函数的getattr,setattr问题

    执行一下代码的结果是? class A: def __init__(self,a,b,c): self.x = a+b+c a = A(1,2,3) b = getattr(a,'x') setatt ...

  6. VS2010 下C++使用UTF8编码

    http://www.nubaria.com/en/blog/?p=289 #pragma execution_character_set("utf-8")

  7. qemu源码分析

    参考:http://lists.gnu.org/archive/html/qemu-devel/2011-04/pdfhC5rVdz7U8.pdf 1. qemu与Bochs的区别: 1. Bochs ...

  8. mysql优化1:建表原则

    建表三大原则: 定长和变长分离 常用字段和不常用字段分离 使用冗余字段或冗余表 1.定长与变长分离 如 id int,占4个字节,char(4)占4个字符长度,也是定长,time 即每一个单元值占的字 ...

  9. vscode eslint插件对vue文件无效

    vscode配置好了之后,只对.js文件提示 vue文件没有效果 改成如下配置就好了. "eslint.validate": [ "javascript", & ...

  10. 20140613 Opencv重新编译 word小技巧

    1.OPENCVGPU重新编译+自己的文件 注意点: 1.生成OPENCV.sln解决方案后,在ALL_build的属性中,添加相应目录: ALL_BUILD中的Debug和Release上的Micr ...