JQuery несколько событий для запуска одной и той же функции

718

Есть ли способ иметь события keyup, keypress, blur и change, вызывающие одну и ту же функцию в одной строке или мне нужно делать их отдельно?

Проблема заключается в том, что мне нужно проверить некоторые данные с помощью поиска db и хотелось бы удостовериться, что нет никакой возможности, чтобы проверка была пропущена по погоде, она набрана или вставлена ​​в поле.

Теги:
javascript-events
events

9 ответов

1300
Лучший ответ

Вы можете использовать .on() для привязки функции к нескольким событиям:

$('#element').on('keyup keypress blur change', function(e) {
    // e.type is the type of event fired
});

Или просто передайте функцию как параметр для обычных функций события:

var myFunction = function() {
   ...
}

$('#element')
    .keyup(myFunction)
    .keypress(myFunction)
    .blur(myFunction)
    .change(myFunction)
  • 2
    С событиями, разделенными пробелами, как вы также включаете интервал имен? .on('keyup.foo keypress.foo blur.foo change.foo', …) или .on('keyup.foo keypress.foo blur.foo change.foo', …) .on('keyup keypress blur change .foo', …) ?
  • 19
    Проблема в том, что myFunction, вероятно, будет вызываться несколько раз, что вы можете предотвратить.
Показать ещё 6 комментариев
47

Как и в jQuery 1.7, метод .on() является предпочтительным методом для привязки обработчиков событий к документу. Для более ранних версий метод .bind() используется для привязки обработчика события непосредственно к элементам.

$(document).on('mouseover mouseout',".brand", function () {
  $(".star").toggleClass("hovered");
})
  • 1
    Это сделано для делегированного события, оно будет работать, но это не самый простой способ и не самый эффективный.
  • 1
    Делегирование событий важно и может (или не может) требоваться в зависимости от того, когда скрипт загружается / запускается, и существуют ли элементы в DOM во время загрузки / запуска скрипта.
29

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

Итак, для тех, кого интересует, event.type - мой ответ:

$('#element').on('keyup keypress blur change', function(event) {
    alert(event.type); // keyup OR keypress OR blur OR change
});

Дополнительная информация в jQuery doc.

19

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

$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

Другой вариант - использовать поддержку цепочки jquery api.

  • 8
    Начиная с jQuery 1.7, метод .on () является предпочтительным методом для присоединения обработчиков событий к документу.
12

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

Звучит так, как будто вы действительно хотите:

$('#ValidatedInput').keydown(function(evt) {
  // If enter is pressed
  if (evt.keyCode === 13) {
    evt.preventDefault();

    // If changes have been made to the input value, 
    //  blur() will result in a change event being fired.
    this.blur();
  }
});

$('#ValidatedInput').change(function(evt) {
  var valueToValidate = this.value;

  // Your validation callback/logic here.
});
9

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

var foo = function() {...}

И позже вы можете установить множество прослушивателей событий, которые вы хотите, чтобы ваш объект вызывал эту функцию, используя on ('event'), оставляя пробел между ними, как показано ниже:

$('#selector').on('keyup keypress blur change paste cut', foo);
  • 3
    Как правило, вы должны объяснить свой ответ. Простое вставка кода не помогает ОП понять их проблему или ваше решение.
  • 0
    Что делать, если мне нужен первый аргумент в функции подписчика события jquery (событие)? Как это использовать?
Показать ещё 1 комментарий
6

Вот как я это делаю.

        $("input[name='title']").on({
            "change keyup": function(e){
                var slug = $(this).val().split(" ").join("-").toLowerCase();
                $("input[name='slug']").val(slug);
            },
        });
4

Ответ Tatu - это то, как я буду интуитивно делать это, но у меня возникли некоторые проблемы в Internet Explorer с таким способом вложения/привязки событий, хотя это делается через .on().

Я не смог точно определить, в каких версиях jQuery это проблема. Но иногда я вижу проблему в следующих версиях:

  • 2.0.2
  • 1.10.1
  • 1.6.4
  • Mobile 1.3.0b1
  • Мобильный 1.4.2
  • Мобильный 1.2.0

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

function myFunction() {
    ...
}

а затем обрабатывать события индивидуально

// Call individually due to IE not handling binds properly
$(window).on("scroll", myFunction);
$(window).on("resize", myFunction);

Это не самое приятное решение, но оно работает для меня, и я подумал, что я поместил его там, чтобы помочь другим, которые могут наткнуться на эту проблему.

1

"Есть ли способ иметь keyup, keypress, blur, а события change вызывать одну и ту же функцию в одной строке?"

Возможно использование .on(), которое принимает следующую структуру: .on( events [, selector ] [, data ], handler ), поэтому вы можете передать несколько событий этому методу. В вашем случае это должно выглядеть так:

$('#target').on('keyup keypress blur change', function(e) {
    // "e" is an event, you can detect the type of event using "e.type"
});

И вот живой пример:

$('#target').on('keyup keypress blur change', function(e) {
  console.log(`"${e.type.toUpperCase()}" event happened`)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="target">

Ещё вопросы

Сообщество Overcoder
Наверх
Меню