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

Question

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