jQuery在on绑定事件时,使用Function.prototype.bind上下文,只能用off(event)解绑函数,否则可能导致事件叠加
因为一个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)解绑函数,否则可能导致事件叠加的更多相关文章
- JavaScript 函数绑定 Function.prototype.bind
ECMAScript Edition5 IE9+支持原生,作用为将一个对象的方法绑定到另一个对象上执行. Function.prototype.bind = Function.prototype.bi ...
- Function.prototype.bind
解析Function.prototype.bind 简介 对于一个给定的函数,创造一个绑定对象的新函数,这个函数和之前的函数功能一样,this值是它的第一个参数,其它参数,作为新的函数的给定参数. b ...
- 解析Function.prototype.bind
简介 对于一个给定的函数,创造一个绑定对象的新函数,这个函数和之前的函数功能一样,this值是它的第一个参数,其它参数,作为新的函数的给定参数. bind的作用 bind最直接的作用就是改变this的 ...
- Function.prototype.bind、call与apply方法简介
前言 前段时间面试遇见一题,题目内容大概是 function Parent() { this.prop = 'parent'; } Parent.prototype.get = function() ...
- Function.prototype.bind、call与apply
学习Function.prototype.bind.call与apply时,看到一篇博客,学到一些内容,但由于博客时间太久,根据官方文档对内容进行一些修正:下文为修正过内容 前言 前段时间面试遇见一题 ...
- 一起Polyfill系列:Function.prototype.bind的四个阶段
昨天边参考es5-shim边自己实现Function.prototype.bind,发现有不少以前忽视了的地方,这里就作为一个小总结吧. 一.Function.prototype.bind的作用 其实 ...
- Function.prototype.bind接口浅析
本文大部分内容翻译自 MDN内容, 翻译内容经过自己的理解. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Glo ...
- 理解javascript中的Function.prototype.bind
在初学Javascript时,我们也许不需要担心函数绑定的问题,但是当我们需要在另一个函数中保持上下文对象this时,就会遇到相应的问题了,我见过很多人处理这种问题都是先将this赋值给一个变量(比如 ...
- 浅析 JavaScript 中的 Function.prototype.bind() 方法
Function.prototype.bind()方法 bind() 方法的主要作用就是将函数绑定至某个对象,bind() 方法会创建一个函数,函数体内this对象的值会被绑定到传入bind() 函数 ...
随机推荐
- Domino - SGU 101 (欧拉路径)
题目大意:这是一个多米诺骨游戏,这个游戏的规则就是一个连着一个,现在给出 N 个多米诺,每个多米诺两边都有一个编号,相邻的多米诺的编号要一致,当然多米诺是可以翻转的(翻转就加‘-’,不翻转是‘+’), ...
- Cookie及App登陆的原理
1.Cookie Cookie意为"甜饼",是由W3C组织提出的.目前Cookie已经成为标准.由于HTTP是一种无状态的协议,服务器单从网络连接上无从知道客户身份.怎么办呢?就给 ...
- CSS3新特性(阴影、动画、渐变、变形、伪元素等)
CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等) 目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...
- winform 获取文件夹的名称 分类: WinForm 2014-08-04 15:50 242人阅读 评论(0) 收藏
目的:获取项目路径下所有文件夹的名称,并绑定到Combobox控件下: 显示要求:此文件夹名称和他的子文件名称的集合: Combobox控件名称:cmbFile 图示: 代码实现: //项目路径 st ...
- javascript之文档碎片,文档碎片在理论上可以提高DOM操作的执行效率
刚来到这里,趁着还没有忘记,来记录一下,昨晚学习的一个知识点——JavaScript中的文档碎片. 一.对文档碎片的基本认识 文档碎片可以提高DOM操作性能(理论上,注意!!理论上的) 文档碎片原理 ...
- [转]Animation 动画详解(一)——alpha、scale、translate、rotate、set的xml属性及用法
转载:http://blog.csdn.net/harvic880925/article/details/39996643 前言:这几天做客户回访,感触很大,用户只要是留反馈信息,总是一种恨铁不成钢的 ...
- Node.js异步处理CPU密集型任务
Node.js异步处理CPU密集型任务 Node.js擅长数据密集型实时(data-intensive real-time)交互的应用场景.然而数据密集型实时应用程序并非仅仅有I/O密集型任务,当碰到 ...
- spin_lock & mutex_lock的差别?
本文由该问题引入到内核锁的讨论,归纳例如以下 为什么须要内核锁? 多核处理器下,会存在多个进程处于内核态的情况,而在内核态下,进程是能够訪问全部内核数据的,因此要对共享数据进行保护,即相互排斥处理 有 ...
- mybatis0204 一对多查询
查询所有订单信息及订单下的订单明细信息. sql语句 主查询表:订单表 关联查询表:订单明细 SELECT orders.*, user.username, user.sex , orderdetai ...
- android 04 AbsoluteLayout
绝对布局:layout_x,layout_y:坐标精准定位 xml文件:不推荐使用 <AbsoluteLayout xmlns:android="http://schemas.andr ...