通过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. git——修改已经提交并push后的commit注释

    把代码push到远程后,发现commit的注释居然多了几个错别字,不行,必须改了! 搜索了一些答案之后自己做了一个总结如下: ①修改倒数第次的commit 指令:$ git rebase -i HEA ...

  2. PHP FILTER_SANITIZE_NUMBER_INT 过滤器

    定义和用法 FILTER_SANITIZE_NUMBER_INT 过滤器删除数字中所有非法的字符. 该过滤器允许所有数字以及 . + - Name: "number_int" ID ...

  3. 管理员技术(三): 配置静态网络地址、 使用yum软件源 、 升级Linux内核、查找并处理文件、查找并提取文件内容

    一. 配置静态网络地址 目标: 本例要求为虚拟机 server 配置以下静态地址参数: 1> 主机名:server0.example.com    2> IP地址:172.25.0.11  ...

  4. [NOIP模拟测试12]题解

    A. 找规律题.儿子的编号减去 小于它编号的最大的fibonacci数 即可得到它父亲的编号. 然后两个节点都暴力上跳就好了.预处理一下fibonacci数,每次二分查找即可. #include< ...

  5. php开发面试题---游戏面向对象设计与分析实例

    php开发面试题---游戏面向对象设计与分析实例 一.总结 一句话总结: 不要光空想,多看几个实例就知道自己的游戏该怎么设计了 根据实例去理解面向对象编程的的六大原则 1.英雄种类分别有:战士.法师. ...

  6. 删除maven项目后eclipse无法启动

    An internal error occurred during: "reload maven project". java.lang.NullPointerExceptio   ...

  7. Linux启动过程的C语言代码分析

    1. main函数 参见上方http://www.cnblogs.com/long123king/p/3543872.html,代码跳转到main函数. arch/x86/boot/main.c 1: ...

  8. 机器学习基石笔记:Homework #4 Regularization&Validation相关习题

    原文地址:https://www.jianshu.com/p/3f7d4aa6a7cf 问题描述 程序实现 # coding: utf-8 import numpy as np import math ...

  9. MySQL数据库_目录

    MySQL数据库初识 MySQL的库表详细操作 MySQL行(记录)的详细操作 MySQL之单表查询 MySQL之多表查询 Navicat工具.pymysql模块 MySQL之视图.触发器.事务.存储 ...

  10. hql 语法与详细解释

    HQL查询: Criteria查询对查询条件进行了面向对象封装,符合编程人员的思维方式,不过HQL(Hibernate Query Lanaguage)查询提供了更加丰富的和灵活的查询特性,因此 Hi ...