因为一个bind函数,未解绑成功导致事件叠加,搞了一下午。

keyup事件绑定:

this.$document.on('keyup', this.keyUp.bind(this));

原解绑函数:

 this.$document.off('keyup', this.keyUp);

修正函数:

this.$document.off('keyup');

正如参考链接所提到的API(未详查):

bind方法会创建一个新函数,称为绑定函数.当调用这个绑定函数时,绑定函数会以创建它时传入bind方法的第一个参数作为this,传入bind方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数.

bind会创建一个新函数绑定到keyup上,此时绑定的函数已经不是自定义的keyup,而是和它功能一样的一个匿名函数(据我推导)。而在解绑的时候,第二个参数是自定义的this.keyUp。但是keyup绑定的并不是this.keyUp,导致未能解绑,以致于函数事件叠加。如果keyup每次自增1,关闭之后再打开就变成自增2,在关闭再打开就变成自增3,以此类推。

参考链接:Javascript通过bind()掌控this (http://blog.csdn.net/rznice/article/details/26134201)

jQuery在on绑定事件时,使用Function.prototype.bind上下文,只能用off(event)解绑函数,否则可能导致事件叠加的更多相关文章

  1. JavaScript 函数绑定 Function.prototype.bind

    ECMAScript Edition5 IE9+支持原生,作用为将一个对象的方法绑定到另一个对象上执行. Function.prototype.bind = Function.prototype.bi ...

  2. Function.prototype.bind

    解析Function.prototype.bind 简介 对于一个给定的函数,创造一个绑定对象的新函数,这个函数和之前的函数功能一样,this值是它的第一个参数,其它参数,作为新的函数的给定参数. b ...

  3. 解析Function.prototype.bind

    简介 对于一个给定的函数,创造一个绑定对象的新函数,这个函数和之前的函数功能一样,this值是它的第一个参数,其它参数,作为新的函数的给定参数. bind的作用 bind最直接的作用就是改变this的 ...

  4. Function.prototype.bind、call与apply方法简介

    前言 前段时间面试遇见一题,题目内容大概是 function Parent() { this.prop = 'parent'; } Parent.prototype.get = function() ...

  5. Function.prototype.bind、call与apply

    学习Function.prototype.bind.call与apply时,看到一篇博客,学到一些内容,但由于博客时间太久,根据官方文档对内容进行一些修正:下文为修正过内容 前言 前段时间面试遇见一题 ...

  6. 一起Polyfill系列:Function.prototype.bind的四个阶段

    昨天边参考es5-shim边自己实现Function.prototype.bind,发现有不少以前忽视了的地方,这里就作为一个小总结吧. 一.Function.prototype.bind的作用 其实 ...

  7. Function.prototype.bind接口浅析

    本文大部分内容翻译自 MDN内容, 翻译内容经过自己的理解. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Glo ...

  8. 理解javascript中的Function.prototype.bind

    在初学Javascript时,我们也许不需要担心函数绑定的问题,但是当我们需要在另一个函数中保持上下文对象this时,就会遇到相应的问题了,我见过很多人处理这种问题都是先将this赋值给一个变量(比如 ...

  9. 浅析 JavaScript 中的 Function.prototype.bind() 方法

    Function.prototype.bind()方法 bind() 方法的主要作用就是将函数绑定至某个对象,bind() 方法会创建一个函数,函数体内this对象的值会被绑定到传入bind() 函数 ...

随机推荐

  1. poj 1847 Tram【spfa最短路】

    Tram Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 12005   Accepted: 4365 Description ...

  2. 匿名类型和Object转换

    本文转载:http://www.cnblogs.com/JustRun1983/archive/2012/05/13/2497997.html net中的匿名类型非常好用, 但是开发中遇到一个问题,当 ...

  3. enum类型被intent所携带时需要注意的地方

    一般我们在Activity之间传递对象时多用Parcelable.比如写一个class,在这个class上标明implements Parcelable并实现接口就可以用Intent.putExtra ...

  4. MFC——error LNK2005: "protected: static struct AFX_MSGMAP

    好久没弄VC程序了,今天弄了下,还会用公司给的窗口重绘作为基类来实现,竟然报了这个错误. 找了一下是这里: 有个窗口重绘类是基类: class CBaseDlg : public CDialog 新建 ...

  5. hdu 3729 I'm Telling the Truth 二分图匹配

    裸的二分图匹配.需要输出方案. #include<cstdio> #include<cstring> #include<vector> #include<al ...

  6. CSU1315:全场最水题之陈兴老师与比赛

    Description 大家都知道ACM比赛罚时很重要.比如说你做A题要10分钟,B题要15分钟,如果先做A题再做B题,那么在ranking上的时间就是10 + (10)+ 15 = 35.如果先做B ...

  7. MapReduce分析明星微博数据

    互联网时代的到来,使得名人的形象变得更加鲜活,也拉近了明星和粉丝之间的距离.歌星.影星.体育明星.作家等名人通过互联网能够轻易实现和粉丝的互动,赚钱也变得前所未有的简单.同时,互联网的飞速发展本身也造 ...

  8. 一个Web Project引用多个Java Project在Eclipse下的配置--转载

    项目结构: 项目由一个Web Project和多个Java Project构成,Web Project需要引用其它Java Project的类和Jar包.开发时用Eclipse3.5和Tomcat调试 ...

  9. iOS原生CIFilter创建二维码

    iOS原生CIFilter创建二维码 2016-05-31 未来C iOS原生CIFilter创建二维码 关于二维码生成,网上也是有很多,很早以前的第三方库大多数都是通过C++写,也是有的如zxing ...

  10. mysql 操作指令笔记

    设置区分大小写: 打开my.ini,最后加入: [mysqld] lower_case_table_names=2 (2表示区分大小写,但仅限于字段,数据库名.表名.存储过程名都是小写的) 查看方法: ...