给事件处理函数传参数
来源:互联网 发布:知画和永琪圆房是哪几 编辑:程序博客网 时间:2024/06/07 02:59
给事件处理函数传参数
今天刷百度前端学院的任务,遇到了一个问题,需要给事件处理函数传参数;我把问题抽象成下面问题:
var lis = document.getElementsByTagName('li');for(var i=0; i<lis.length; i++){ this.i=i; btn.addEventListener('click',handler.bind(this));}//我想在事件处理函数里面获得i。function handler(e){ this.i;}
ES5中bind()解决:
解决方法,将事件处理函数的上下文绑定到for循环里面的this;事件处理函数的上下文不在是btn对象;
分析一下原理,首先详细研究一下bind函数;
bind函数用于将当前函数和指定对象绑定,返回一个新的函数,当新函数被调用时,代码会在指定对象的上下文中执行。
语法为:
bar.bind(上下文参数, 普通参数1, 普通参数2, …);普通参数将传入bar函数。
用jQuery中$.proxy()方法解决;
jQuery.proxy(),接受一个函数,然后返回一个新函数,并且这个新函数始终保持了特定的上下文(context )语境。
jQuery.proxy( function, context )
function将要改变上下文语境的函数。
context函数的上下文语境(this
)会被设置成这个 object 对象。jQuery.proxy( context, name )
context函数的上下文语境会被设置成这个 object 对象
name将要改变上下文语境的函数名(这个函数必须是前一个参数 ‘context’ 对象的属性)
这个方法通常在向一个元素上附加事件处理函数时,上下文语境实际是指向另一个对象的情况下使用。
var obj = {name: "John",test: function() {alert( this.name );$("#test").unbind("click", obj.test);}};$("#test").click( jQuery.proxy( obj, "test" ) );// 以下代码跟上面那句是等价的:// $("#test").click( jQuery.proxy( obj.test, obj ) );// 可以与单独执行下面这句做个比较。// $("#test").click( obj.test );
jQuery 源码之 proxy:
使用 apply 形式, 执行回调函数.
jQuery.proxy = function( fn, proxy, thisObject ) { if ( arguments.length === 2 ) { // jQuery.proxy(context, name); if ( typeof proxy === "string" ) { thisObject = fn; fn = thisObject[ proxy ]; proxy = undefined; /* 转化结果: thisObject -> context fn -> name proxy -> undefined */ } // jQuery.proxy(name, context); else if ( proxy && !jQuery.isFunction( proxy ) ) { thisObject = proxy; proxy = undefined; } } if ( !proxy && fn ) { /* 使用 proxy 保证 函数执行时, context 为指定值 */ proxy = function() { return fn.apply( thisObject || this, arguments ); }; } // Set the guid of unique handler to the same of original handler, so it can be removed if ( fn ) { proxy.guid = fn.guid = fn.guid || proxy.guid || jQuery.guid++; } // So proxy can be declared as an argument return proxy;}
其实就是平常使用的的call和apply,大部分的时候作为回调使用。
在stackoverflow上有个问题,其中的例子比较典型,供参考:
比如有如下代码:
$('#myElement').click(function() { // In this function, "this" is our DOM element. $(this).addClass('aNewClass');});
这里的this就是我们的DOM元素。如果我们要在增加class样式之前需要等待一段时间,可能会将代码写成下面这样(注意:有问题的代码)
$('#myElement').click(function() { setTimeout(function() { // Problem! In this function "this" is not our element! $(this).addClass('aNewClass'); }, 1000);});
这里的this就不是我们期望的那个DOM元素了。解决方法就是使用jQuery的$.proxy()了,代码如下:
$('#myElement').click(function() { // give $.proxy our function, setTimeout($.proxy(function() { $(this).addClass('aNewClass'); // Now "this" is again our element }, this), 1000); // and tell it that we want our DOM element to be the value of "this" in the function});
我们可以这样来理解上面的代码:
function() { // func is the function we gave to $.proxy func.apply( ctx ); // ctx is the value we wanted for "this" (our DOM element)}
这就体现出来jQuery中$.proxy()的强大功效了。
注意:在jQuery 1.6及之后的版本中,除了上面提到的两种用法之外,proxy还增加了其他两种用法:
jQuery.proxy( function, context [, additionalArguments ] )jQuery.proxy( context, name [, additionalArguments ] )
- 给事件处理函数传参数
- 给wxPython事件处理函数传递参数
- 给线程处理函数传结构体参数
- jquery 事件处理handler函数的参数
- dojo小例子(15)给dojo on的事件处理函数传递自定义参数的两种方法
- JAVASCRIPT中给事件处理程序传递参数
- 给事件处理函数添加 return false的作用是什么?
- C++给函数传数组参数
- eclipse如何给main函数传参数
- C++给函数传数组参数
- C++给函数传数组参数
- 传递参数给函数
- 给事件响应函数传递参数
- dll回调给java的函数参数需要有字节数组类型参数的处理
- 用户控件通过自定义事件传参数给父窗体
- js动态给对象onclick事件赋值,动态传参数
- 给事件添加处理程序
- C++给函数传数组参数C++给函数传数组参数
- 查看CentOS上Apache位置,版本,停止,启动
- 异常处理及try/catch/finally/return 的执行顺序:
- 1 pytorch60分钟入门教程
- __all__暴露接口
- 项目中如何使用solr(续)--分页
- 给事件处理函数传参数
- phpstorm 激活教程地址
- 原型相关的概念
- 信号量的实现
- IDEA Unable to save settings: Failed to save settings. Please restart IntelliJ IDEA
- JavaScript 四则运算(加减乘除小数运算)避免损失精度
- JavaScript 函数 eval()
- java第一章_java运算符_比较运算符
- Poedu_Python_Lesson003_基础语法_列表、元组、判断、循环