JQuery: передача $(this) в обработчик события named

Я отмечаю, что рекомендуется использовать именованные функции при привязке обработчика события к событию 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
}

Ответ 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
}

Это грязно.

Ответ 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, очень полезна.

Ответ 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);

Ответ 4

Фактически вы сможете использовать $(this) внутри вашего метода doFancyStuff, если вы определяете его как обработчик событий. Метод .on() установит контекст (это) соответственно:

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

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

Ответ 5

Вы должны изменить doFancyStuff, чтобы ожидать ту же подпись, что и ваша анонимная функция. Как вы это кодировали, похоже, что он ожидает единственный параметр объекта jQuery и игнорирует "это". Но параметр события - это что-то другое (объект события) и "this" является целью. Если вы хотите использовать функцию как цель события, тогда она должна ожидать тех же данных. Поэтому перепишите:

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

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