因为一个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. Geometric Shapes - POJ 3449(多边形相交)

    题目大意:给一些几何图形的编号,求出来这些图形都和那些相交.   分析:输入的正方形对角线上的两个点,所以需要求出来另外两个点,公式是: x2:=(x1+x3+y3-y1)/2; y2:=(y1+y3 ...

  2. ll 详解

    长选项必须使用的参数对于短选项时也是必需使用的.  -a, --all                     不隐藏任何以. 开始的项目  -A, --almost-all             ...

  3. SSH服务及花生壳域名解析

    一.安装说明以CentOS 5为例 1.安装必要的开发包 [root@localhost ~]# yum install gcc gcc-c++ autoconf automake 2.下载phddn ...

  4. 一句话菜刀获取ip详细信息

    <?php $ip="你要查的ip"; $url="http://ip.taobao.com/service/getIpInfo.php?ip=".$ip ...

  5. 封装Unity3d的dll时的经验总结

    部分时候,我们需要自己封装一些小工具来简化我们的工作. 实验时,偶然发现Unity3d的console在双击进行debug信息的输出定位时,只能跟进到dll的上一层,因此我们可以将unity3d自带的 ...

  6. 遍历datatable的几种方法【转载】

    遍历datatable的方法2009-- :02方法一: DataTable dt = dataSet.Tables[]; ; i < dt.Rows.Count ; i++) { string ...

  7. 小猪的Android入门之路 Day 3 - part 3

    小猪的Android入门之路 Day 3 - part 3 各种UI组件的学习 Part 3 本节引言: 在前面两个部分中我们对Android中一些比較经常使用的基本组件进行了一个了解, part 1 ...

  8. android 30 下拉列表框:ArrayAdapter和Spinner.

    package com.sxt.day05_04; import android.os.Bundle; import android.app.Activity; import android.cont ...

  9. Java theory and practice: Thread pools and work queues--reference

    Why thread pools? Many server applications, such as Web servers, database servers, file servers, or ...

  10. 提取DLL类库代码

    @SET destFolder=.\bin@XCOPY /I /Y %SYSTEMDRIVE%\WINDOWS\assembly\GAC_MSIL\Microsoft.ReportViewer.Pro ...