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

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

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

827
events javascript-events jquery

10 ответов

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

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

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

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

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

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

подробнее на jQuery doc.

37

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

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

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

19

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

похоже, что вы действительно хотите это что-то вроде этого:

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

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

var foo = function() {...}

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

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

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

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

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

5

"есть ли способ, чтобы иметь 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">
3
$("element").on("event1 event2 event..n", function() {
   //execution
});

в этом уроке об обработке нескольких событий.

3