Лучший способ связать события в jQuery

Question

Я ищу лучший способ связать несколько событий с одним элементом в jQuery. Я пытаюсь избежать написания нескольких операторов $ (element) .bind ('event', ...) или $ (element) .event (...).

Код

// old way  
var textbox = $('input'); 
$(textbox).focus(function() { ... } 
$(textbox).blur(function() { ... } 

// new way 
$(textbox).extend({ 
    focus: function() { 
      ... 
    }, 
    blur: function() { 
      .... 
    } 
}); 

К сожалению, эта реализация не работает. Кто-нибудь имеет лучшее предложение? Спасибо.

Answer 1

Все ответы пока предполагают, что вы хотите связать одну и ту же функцию обратного вызова с несколькими событиями. Если это не так, подумайте об использовании .on() с картой событий:

$('selector').on({ 
    focus: function(e) { 
     // do something for focus 
    }, 
    blur: function(e) { 
     // do something else entirely for blur 
    }, 
    ... 
} 

Answer 2

Попробуйте это:

$("textbox").bind('focus blur', function() { 
    // your code 
}); 

Для JQuery 1.7+ bind был вытеснены on:

$("textbox").on('focus blur', function() { 
    // your code 
}); 

В обоих этих случаях функция, заданная будет работать на всех событий, перечисленных в первый параметр. .on() метод

Answer 3

Использовать JQuery в:

$('input').on("focus blur", function() { 
}); 

Если вам необходимо выполнить условную логику на основе события:

$('input').on("focus blur", function (e) { 
    var whichEvent = e.type; // Will be "focus" or "blur" 
}); 

Answer 4

Вы можете использовать

<element>.on("eventhandlers as commaseparated list",function(){})

если вы можете используйте одну функцию для всех этих обработчиков, или

element.click(...) 
     .<anotherhandler>(...) 
     .<yetanother>(...) 

Если вам нужны разные функции.

.on() является предпочтительным способом.

Answer 5

// My way 
var textbox = $('input'); 
$(textbox).on('focus blur', function(e){ 
    if (e.type == 'focus'){ 
    // do the focus stuff 
    } else if (e.type == 'blur'){ 
    // do the blur stuff 
    } 
} 

Это проверялось, но принцип остается

Answer 6

Вы можете использовать функции привязки в JQuery:

Ex:

$(textbox).bind('focus blur',function(){ 
    //do something 
}); 

Answer 7

После того, как вы сохранили JQuery объект в переменной, вам не нужно продолжать преобразовывать его в объект jQuery снова и снова. Вы также можете «привязать» привязки событий, поскольку они возвращают исходный объект.

Попробуйте что-то вроде этого:

var $textbox = $('input'); // (Use a $ to mark variables that hold jQuery objects 
$textbox 
    .on("focus", function() { ... }) 
    .on("blur", function() { ... }); 

(Кроме того, убедитесь, что вы убедитесь, что вы используете правильные имена событий ... Я понятия не имею, сколько времени я впустую охоты ошибки, которые были потому что я сделал свое имя для события.)