因为一个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. flexpaper 背景色变化

    1.mxml文件头部:添加 backgroundAlpha="0" <s:Application xmlns:fx="http://ns.adobe.com/mxm ...

  2. Cocos2d-x CCActionInterval

    第一部分:CCActionInterval家族(持续动作) 持续动作,顾名思义,就是该动作的执行将持续一段时间.因此持续动作的静态生成函数,往往附带一个时间值Duration.例如: CCAction ...

  3. Java做界面的感想。。

    我用Swing做出的例子: JavaFX做出的界面: 后来又做出了自己编写的一套基于Synth的L&F,其与直接在代码中重绘某个组件不同,最大优点是具有可插拔性,即在不改变原有程序代码的情况下 ...

  4. 三分钟读懂Oracle数据库容灾架之DataGuard

    Oracle数据库目前依然处于商用数据库的霸主地位. 运行在Oracle数据库上的核心业务及核心数据的安全性尤为重要. 目前市场上针对Oracle数据库常见的容灾产品大致可以分为两大类. Oracle ...

  5. 通过代码来执行testng.xml

    大多数时候,我们都是通过Eclipse IDE上的操作命令来执行testng 框架下的case 运行.那如果我们不想通过这种方式,而是想通过代码调用来实现执行该怎么办?下面是我搜集的两种方式供大家参考 ...

  6. November 4th Week 45th Friday 2016

    Problems are not stop signs, they are guidelines. 问题不是休止符,而是指向标. Most of the problems can be overcom ...

  7. python google play

    #!/usr/env python #-*- coding: utf-8 -*- import urllib import urllib2 import random import requests ...

  8. ORACLE EXP命令

    本文对Oracle数据的导入导出 imp ,exp 两个命令进行了介绍, 并对其对应的參数进行了说明,然后通过一些演示样例进行演练,加深理解.文章最后对运用这两个命令可能出现的问题(如权限不够,不同o ...

  9. docker 镜像和容器的批量清理

    镜像和容器的清理 删除所有运行中的容器 $ docker kill $(docker ps -q) 删除所有停止的容器 $ docker rm $(docker ps -a -q) 删除所有没有tag ...

  10. Qt 学习之路 :文件

    文件操作是应用程序必不可少的部分.Qt 作为一个通用开发库,提供了跨平台的文件操作能力.从本章开始,我们来了解下 Qt 的文件以及输入输出的功能,也就是 I/O 系统. Qt 通过QIODevice提 ...