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

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

900 голосов
/ 28 марта 2010

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

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

Ответы [ 11 ]

1642 голосов
/ 28 марта 2010

Вы можете использовать .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)
56 голосов
/ 14 ноября 2012

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

$(document).on('mouseover mouseout',".brand", function () {
  $(".star").toggleClass("hovered");
})
43 голосов
/ 15 мая 2013

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

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

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

Больше информации в jQuery doc .

22 голосов
/ 28 марта 2010

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

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

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

16 голосов
/ 28 марта 2010

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

Звучит так, что вы на самом деле хотите, что-то вроде этого: 

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

    // If changes have been made to the input's 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.
});
12 голосов
/ 09 ноября 2014

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

$("input[name='title']").on({
    "change keyup": function(e) {
        var slug = $(this).val().split(" ").join("-").toLowerCase();
        $("input[name='slug']").val(slug);
    },
});
11 голосов
/ 08 апреля 2015

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

var foo = function() {...}

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

$('#selector').on('keyup keypress blur change paste cut', foo);
6 голосов
/ 07 апреля 2015

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

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

  • 2.0.2
  • 1.10.1
  • 1.6.4
  • Мобильный 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);

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

4 голосов
/ 22 апреля 2018 
$("element").on("event1 event2 event..n", function() {
   //execution
});

Этот урок посвящен обработке нескольких событий.

3 голосов
/ 26 сентября 2017

"Есть ли способ заставить события 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">
Страница:
...