通过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. Django 自定义 admin

    为 model 自定义显示 label是这个Field如果在form中的话会显示的.而verbose_name在form中不会显示.只是作为一种说明而已 callable()   -->  是否 ...

  2. php常用函数总结2

    文件系统函数 函数名 描述 实例 输入 输出 操作 fopen() 打开文件或者 URL $handle = fopen("ftp://user:password@example.com/s ...

  3. 高级运维(一):反向代理&使用Varnish加速Web

    案例1.反向代理      目标: 1.代理服务器可以将远程的Web服务器页面缓存于本地 2.代理服务器端口设置为80端口 3.用户通过访问代理服务器即可获得远程Web服务器页面上的内容 4.远程We ...

  4. RichView

    TRichView中文文档 TRichView 是Delphi/C++Builder  控件,主要用于显示.编辑和打印超文本文档. 新版本解决多个兼容性问题,更新了字符串标签.剪贴板.RTF和DB组件 ...

  5. CSS:CSS 属性 选择器

    ylbtech-CSS:CSS 属性 选择器 1.返回顶部 1. CSS 属性 选择器 具有特定属性的HTML元素样式 具有特定属性的HTML元素样式不仅仅是class和id. 注意:IE7和IE8需 ...

  6. Centos7.4安装elasticsearch6.3+kibana6.3集群

    Centos7.4安装elasticsearch+kibana集群 Centos7.4安装elasticsearch+kibana集群 主机环境 软件环境 主机规划 主机安装前准备 安装jdk1.8 ...

  7. 为什么TCP 会粘包断包UDP不会

    TCP(transport control protocol,传输控制协议)是面向连接的,面向流的,提供高可靠性服务.收发两端(客户端和服务器端)都要有一一成对的socket,因此,发送端为了将多个发 ...

  8. centos7升级php5.4到php5.6

    history命令历史 8 yum provides php #自带的只有5.4版本 9 rpm -Uvh https://mirror.webtatic.com/yum/el7/epel-relea ...

  9. axios以form-data形式的传递参数遇到的坑

    axios默认的Content-type是application/json;charset=UTF-8,如果想要以表单的形式传递参数,只要修改{headers:{'Content-Type':'app ...

  10. DOM中常见的元素获取方式

    1.getElementById获取元素    返回的是一个元素对象 var  timer = document.getElementById('time'); console.dir   打印返回元 ...