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

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

3 голосов
/ 19 марта 2012

Я ищу лучший способ привязать несколько событий к одному элементу в 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() {
            ....
    }
});

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

Ответы [ 7 ]

9 голосов
/ 19 марта 2012

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

$('selector').on({
    focus: function(e) {
        // do something for focus
    },
    blur: function(e) {
        // do something else entirely for blur
    },
    ...
}
3 голосов
/ 19 марта 2012

Используйте jQuery's .on() метод: 

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

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

$('input').on("focus blur", function (e) {
    var whichEvent = e.type; // Will be "focus" or "blur"
});
3 голосов
/ 19 марта 2012

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

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

Для jQuery 1.7+ bind заменено на on: 

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

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

0 голосов
/ 19 марта 2012

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

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

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

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

0 голосов
/ 19 марта 2012

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

Ex: 

$(textbox).bind('focus blur',function(){
  //do something
 });
0 голосов
/ 19 марта 2012 
// 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
  }
}

Это не проверено, но принцип имеет место

0 голосов
/ 19 марта 2012

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

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

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

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

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

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

...