Question

我注意到建议use named functions when binding an event handler to a javascript event。当我的函数需要传递给this对象时，我该怎么做？

例如，如何通过直接调用doFancyStuff来替换下面的匿名函数：

$(document).on('change', 'input.fancy-textbox', function () {
    doFancyStuff($(this));
});

function doFancyStuff($textbox) {
    // fanciness
}

如果你指出我可能会破坏上述代码的其他约定，那么可以加分。

为了澄清，我想在多个地方调用我的示例中的doFancyStuff()方法，否则，我可以这样做：

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

function doFancyStuff() {
    var $textbox = $(this);

    // fanciness
}

Answer 1

我想说这是一个意见问题。我发现在这里使用匿名函数没问题。如果这是唯一调用doFancyStuff的地方，您可以这样做：

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

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

但是，如果从多个地方调用此函数并且您无法更改其工作方式，则必须执行以下操作：

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

function doFancyStuffFromEvent() {
    // fanciness
    doFancyStuff($(this));
}

function doFancyStuff($textbox) {
    // fanciness
}

哪个很乱。

Answer 2

我使用$.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
}

如果doFancyStuff是对象方法，那么能够提供myChoiceOfThis之类的引用非常有用。

Answer 3

按原样传递函数：

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

function doFancyStuff() {
    $(this).fancy(); // :-P
}

jQuery将使用适当的上下文集自动调用您的函数。

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

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

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

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

Answer 4

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

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

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

Answer 5

您必须更改doFancyStuff以期望与匿名函数具有相同的签名。你编写它的方式，看起来它需要一个jQuery对象的单个参数，并忽略“this”。但是事件的参数是其他东西（事件对象）而“this”是目标。如果要将函数用作事件目标，则需要使用相同的数据。所以改写：

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

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

jQuery：将$（this）传递给命名函数事件处理程序

5 个答案: