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


978

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

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

Ответы:


1795

Вы можете использовать .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)

3
С событиями, разделенными пробелами, как вы также включаете интервал имен? .on('keyup.foo keypress.foo blur.foo change.foo', …)или .on('keyup keypress blur change .foo', …)?
Sukima

24
Проблема в том, что myFunction, вероятно, будет вызываться несколько раз, что вы можете предотвратить.
Эсгер

2
Как я могу передать параметр в этой функции?
kushalvm

@ Esger В любом случае, чтобы сделать это? В мобильном мне всегда нужно on('click tap', e => {...}). Слушатель может быть запущен дважды, я просто хочу запустить один раз, как я могу кодировать в функции слушателя?
заседание

9
@Tomlsion Возможно, добавьте className «busy» к элементу в вызываемой функции, а затем, $('#element:not(.busy)').on('keyup keypress blur change', function(e){…});наконец, удалите className «busy».
Esger

60

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

$(document).on('mouseover mouseout',".brand", function () {
  $(".star").toggleClass("hovered");
})

1
Это делается для делегированного события, оно будет работать, но это не самый простой и не самый эффективный способ.
Бен Талиадорос

1
Делегирование событий важно, и может (или не может) потребоваться в зависимости от того, когда скрипт загружается / запускается, и существуют ли элементы в DOM во время загрузки / запуска скрипта.
random_user_name

45

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

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

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

Больше информации в документе JQuery .


24

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

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

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


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

18

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

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

$('#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.
});

14

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

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

11

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

var foo = function() {...}

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

$('#selector').on('keyup keypress blur change paste cut', foo);

3
Как правило, вы должны объяснить свой ответ. Простое вставление кода не поможет ОП понять их проблему или ваше решение.
Leigero

Что делать, если мне нужен первый аргумент в функции подписчика событий jquery (событие)? Как это использовать?
Dr.X

Это нормально, вы можете просто объявить функцию с параметром события, а затем получить к ней доступ из метода. Эти события передадут объект в себя. Надеюсь, это поможет. var foo = function (event) {console.log (event); } $ ('# selector'). on ('keyup keypress blur change paste paste', foo);
Кодер Galaxy

7

Ответ Тату заключается в том, как я бы сделал это интуитивно, но у меня возникли некоторые проблемы в 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

Есть ли способ иметь 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">


2

Это легко реализовать с помощью встроенных методов DOM без большой библиотеки, такой как jQuery, если вы хотите, просто требуется немного больше кода - переберите массив имен событий и добавьте слушатель для каждого:

function validate() {
  // ...
}

const element = document.querySelector('#element');
['keyup', 'keypress', 'blur', 'change'].forEach((eventName) => {
  element.addEventListener(eventName, validate);
});
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.