通过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. OpenSearch最新功能介绍

    摘要:阿里云开放搜索(OpenSearch)是一款结构化数据搜索托管服务,其能够提供简单.高效.稳定.低成本和可扩展的搜索解决方案.OpenSearch以平台服务化的形式,将专业搜索技术简单化.低门槛 ...

  2. YII 中加入短信接口的函数

    public function smsto($telphone,$message) { //短信接口用户名 $uid,如果没有或不能发送请与客服联系 $uid = 'zyd'; //短信接口密码 $p ...

  3. 【LeetCode 3】无重复字符的最长子串

    描述 [题解] 尺取法 对于[l..r]这段 如果新加进来的s[r]有和之前的重复. 那么就不用重新开始了. 直接递增左区间. 让这段没有重复数字了再说. *****然后再把s[r]加进去. [代码] ...

  4. Linux 常用的一些操作

    1.查看linux中某个端口是否被占用 1> 使用lsof lsof -i:端口号      查看该端口是否被占用 2> 使用netstat netstat -antpu |grep 80 ...

  5. NX二次开发-Block UI C++界面Object Color Picker(对象颜色拾取器)控件的获取(持续补充)

    Object Color Picker(对象颜色拾取器)控件的获取 NX9+VS2012 #include <uf.h> #include <uf_obj.h> UF_init ...

  6. sklearn中standardscaler中fit_transform()和transform()有什么区别,应该怎么使用?

    在根据机器学习书中提供的实例中,看到需要对训练和测试的特征数据进行标准化. 但是使用的是有两个函数, 对于训练数据,使用的是fit_transform()函数 对于测试数据,使用的是tansform( ...

  7. Windows 安装 Anaconda3+PyCharm

    由于本人使用的是windows 10 操作系统,所以介绍在 windows 10 系统中安装 Anaconda3 的过程. 下载 Anaconda 官网下载地址:https://www.anacond ...

  8. img标签+map的使用

    img标签+map的使用 img标签含有一个usemap属性,用法相当于锚点的使用,usemap="#useName".然后就是map标签,具体代码: <body> & ...

  9. python之lambda,random,timeit,collections,

    python之lambda,random,timeit,collections,一. python之lambda函数lambda函数又称为匿名函数,匿名函数就是没有函数名的函数.>>> ...

  10. linux下根据根据进程号查端口、根据端口号查进程号汇总,以及netstat的相关资料(工作中匮乏的知识)

    根据端口查进程: lsof -i:port netstat -nap | grep port 根据进程号查端口: lsof -i|grep pid netstat -nap | grep pid 根据 ...