[英]jQuery: passing $(this) to named function event handler
I note that it's recommended to use named functions when binding an event handler to a javascript event . 我注意到, 在将事件处理程序绑定到javascript事件时,建议使用命名函数 。 How can I do this when my function needs to be passed the this
object? 当我的函数需要传递给this
对象时,我怎么能这样做?
For example, how would I replace the anonymous function below by directly calling doFancyStuff
: 例如,如何通过直接调用doFancyStuff
替换下面的匿名函数:
$(document).on('change', 'input.fancy-textbox', function () {
doFancyStuff($(this));
});
function doFancyStuff($textbox) {
// fanciness
}
Extra points if you point out other conventions I might be breaking with the above code. 如果你指出我可能打破上述代码的其他约定,请加分。
To clarify, I want to call the doFancyStuff()
method in my example from multiple places, otherwise yes, I could just do something like this: 为了澄清,我想在多个地方调用我的例子中的doFancyStuff()
方法,否则,我可以这样做:
$(document).on('change', 'input.fancy-textbox', doFancyStuff);
function doFancyStuff() {
var $textbox = $(this);
// fanciness
}
I would say that's a matter of opinion. 我想说这是一个意见问题。 I see no problem using an anonymous function here. 我发现在这里使用匿名函数没问题。 If this is the only place doFancyStuff
is called, you could do this: 如果这是调用doFancyStuff
的唯一地方,你可以这样做:
$(document).on('change', 'input.fancy-textbox', doFancyStuff);
function doFancyStuff() {
// fanciness
var $textbox = $(this)
}
However, if this function is called from multiple places and you can't change the way it works, you would have to do something like this: 但是,如果从多个地方调用此函数并且您无法更改其工作方式,则必须执行以下操作:
$(document).on('change', 'input.fancy-textbox', doFancyStuffFromEvent);
function doFancyStuffFromEvent() {
// fanciness
doFancyStuff($(this));
}
function doFancyStuff($textbox) {
// fanciness
}
Which is messy. 哪个很乱。
I use $.proxy to solve this issue: 我使用$ .proxy来解决这个问题:
$(document).on('change', 'input.fancy-textbox', $.proxy(doFancyStuff, myChoiceofThis);
function doFancyStuff(event) {
// $el is the same as $(this) when using anonymous functions
var $el = $(event.currentTarget);
// me === myChoiceOfThis
var me = this; // me === myChoiceOfThis
}
If doFancyStuff
is an object method, then being able to give a reference such as myChoiceOfThis
is very useful. 如果doFancyStuff
是一个对象方法,那么能够提供诸如myChoiceOfThis
的引用是非常有用的。
Just pass the function as is: 只需按原样传递函数:
$(document).on('change', 'input.fancy-textbox', doFancyStuff);
function doFancyStuff() {
$(this).fancy(); // :-P
}
jQuery will automatically invoke your function with the proper context set. jQuery将使用适当的上下文集自动调用您的函数。
As for other conventions you might be breaking
: are you sure you need event delegation? 至于other conventions you might be breaking
:你确定需要事件委托吗? If not, this would be much better: 如果没有,这会好得多:
$('input.fancy-textbox').on('change', doFancyStuff);
or you could even use the short-hand version: 或者您甚至可以使用简写版本:
$('input.fancy-textbox').change(doFancyStuff);
You will actually be able to use $(this)
inside your method doFancyStuff
if you define it as your event handler. 如果将其定义为事件处理程序,您实际上可以在方法doFancyStuff
使用$(this)
。 The .on() method will set the context (this) accordingly: .on()方法将相应地设置上下文(this):
$(document).on('change', 'input.fancy-textbox', doFancyStuff);
function doFancyStuff() {
// 'this' will be the changed input.fancy-textbox
}
You have to change doFancyStuff
to expect the same signature as your anonymous function. 您必须更改doFancyStuff
以期望与匿名函数具有相同的签名。 The way you've coded this, it looks like it expects a single parameter of a jQuery object, and ignores "this." 你编写它的方式,看起来它需要一个jQuery对象的单个参数,并忽略“this”。 But the parameter of an event is something else (the event object) and "this" is the target. 但是事件的参数是其他东西(事件对象)而“this”是目标。 If you want to use a function as an event target, then it's got to expect the same data. 如果要将函数用作事件目标,则需要使用相同的数据。 So rewrite: 所以改写:
$(document).on('change', 'input.fancy-textbox', doFancyStuff);
function doFancyStuff(e) {
var $textbox = $(this);
// fanciness
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.