Javascript jQuery：将 $(this) 传递给命名函数事件处理程序

jQuery: passing $(this) to named function event handler

提问by ajbeaven

I note that it's recommended to use named functions when binding an event handler to a javascript event. How can I do this when my function needs to be passed the thisobject?

我注意到建议在将事件处理程序绑定到 javascript event 时使用命名函数。当我的函数需要传递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
}

采纳答案by James Montagne

I would say that's a matter of opinion. I see no problem using an anonymous function here. If this is the only place doFancyStuffis 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.

这是乱七八糟的。

回答by TJ.

I use $.proxyto 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 doFancyStuffis an object method, then being able to give a reference such as myChoiceOfThisis very useful.

如果doFancyStuff是对象方法，那么能够给出诸如此类的引用myChoiceOfThis是非常有用的。

回答by Joseph Silber

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? If not, this would be much better:

至于other conventions you might be breaking：你确定你需要事件委托吗？如果没有，这会好得多：

$('input.fancy-textbox').on('change', doFancyStuff);

or you could even use the short-hand version:

或者你甚至可以使用简写版本：

$('input.fancy-textbox').change(doFancyStuff);

回答by Didier Ghys

You will actually be able to use $(this)inside your method doFancyStuffif you define it as your event handler. The .on() method will set the context (this) accordingly:

如果您将其定义为您的事件处理程序，您实际上可以$(this)在您的方法中使用doFancyStuff。.on() 方法将相应地设置上下文（this）：

$(document).on('change', 'input.fancy-textbox', doFancyStuff);

function doFancyStuff() {
    // 'this' will be the changed input.fancy-textbox
}

回答by Jamie Treworgy

You have to change doFancyStuffto expect the same signature as your anonymous function. The way you've coded this, it looks like it expects a single parameter of a jQuery object, and ignores "this." But the parameter of an event is something else (the event object) and "this" is the target. If you want to use a function as an event target, then it's got to expect the same data. So rewrite:

您必须更改doFancyStuff以期望与您的匿名函数具有相同的签名。按照您的编码方式，它看起来像是需要一个 jQuery 对象的单个参数，而忽略了“this”。但是事件的参数是别的东西（事件对象），而“this”是目标。如果你想使用一个函数作为事件目标，那么它必须期待相同的数据。所以重写：

$(document).on('change', 'input.fancy-textbox', doFancyStuff);

function doFancyStuff(e) {
    var $textbox = $(this);       
    // fanciness
}