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);

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
}