jQuery wiele zdarzeń, aby uruchomić tę samą funkcję

Czy istnieje sposób, aby mieć keyup, keypress, bluroraz changewydarzenia nazywają tę samą funkcję w jednej linii lub muszę zrobić je osobno?

Problem, który mam, polega na tym, że muszę zweryfikować niektóre dane za pomocą wyszukiwania bazy danych i chciałbym upewnić się, że sprawdzanie poprawności nie zostanie pominięte, niezależnie od tego, czy zostanie wpisane, czy wklejone w polu.

Możesz użyć .on()do powiązania funkcji z wieloma zdarzeniami:

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

Lub po prostu przekaż funkcję jako parametr do normalnych funkcji zdarzeń:

var myFunction = function() {
   ...
}

$('#element')
    .keyup(myFunction)
    .keypress(myFunction)
    .blur(myFunction)
    .change(myFunction)

Począwszy od jQuery 1.7, .on()metoda jest preferowaną metodą dołączania procedur obsługi zdarzeń do dokumentu. We wcześniejszych wersjach .bind()metoda służy do dołączania modułu obsługi zdarzeń bezpośrednio do elementów.

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

Szukałem sposobu na uzyskanie typu zdarzenia, gdy jQuery nasłuchuje kilku zdarzeń jednocześnie, a Google umieścił mnie tutaj.

Tak więc dla zainteresowanych event.typejest moja odpowiedź:

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

Więcej informacji w dokumencie jQuery .

Możesz użyć metody powiązania, aby dołączyć funkcję do kilku zdarzeń. Po prostu przekaż nazwy zdarzeń i funkcję modułu obsługi jak w tym kodzie:

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

Inną opcją jest użycie obsługi łańcuchowej interfejsu API jquery.

Jeśli podłączysz tę samą procedurę obsługi zdarzeń do kilku zdarzeń, często napotykasz problem z uruchomieniem więcej niż jednego z nich jednocześnie (np. Użytkownik naciska kartę po edycji; naciśnięcie klawisza, zmiana i rozmycie mogą się uruchomić).

Wygląda na to, że tak naprawdę chcesz czegoś takiego:

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

Tak to robię.

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

Możesz zdefiniować funkcję, której chcesz ponownie użyć, jak poniżej:

var foo = function() {...}

Później możesz ustawić dowolną liczbę detektorów zdarzeń na obiekcie, aby wyzwalały tę funkcję za pomocą on („event”), pozostawiając spację pomiędzy nimi, jak pokazano poniżej:

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

Odpowiedź Tatu brzmi: intuicyjnie, ale mam pewne problemy w Internet Explorerze z tym sposobem zagnieżdżania / wiązania zdarzeń, nawet jeśli odbywa się to .on()metodą.

Nie byłem w stanie dokładnie wskazać, z którymi wersjami jQuery jest problem. Ale czasami widzę problem w następujących wersjach:

• 2.0.2
• 1.10.1
• 1.6.4
• Telefon komórkowy 1.3.0b1
• Mobile 1.4.2
• Mobile 1.2.0

Moim obejściem było najpierw zdefiniowanie funkcji,

function myFunction() {
    ...
}

a następnie obsłużyć zdarzenia indywidualnie

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

To nie jest najładniejsze rozwiązanie, ale działa dla mnie i pomyślałem, że przedstawię to, aby pomóc innym, którzy mogą natknąć się na ten problem

$("element").on("event1 event2 event..n", function() {
   //execution
});

Ten samouczek dotyczy obsługi wielu zdarzeń.

Czy istnieje sposób, aby mieć keyup, keypress, bluroraz changewydarzenia nazywają tę samą funkcję w jednej linii?

Możliwe jest użycie .on(), która akceptuje następującą strukturę:, .on( events [, selector ] [, data ], handler )więc możesz przekazać wiele zdarzeń do tej metody. W twoim przypadku powinno to wyglądać tak:

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

A oto przykład na żywo:

$('#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">

Można to łatwo zaimplementować za pomocą wbudowanych metod DOM bez dużej biblioteki, takiej jak jQuery, jeśli chcesz, wystarczy trochę więcej kodu - iteruj tablicę nazw zdarzeń i dodaj detektor dla każdego:

function validate() {
  // ...
}

const element = document.querySelector('#element');
['keyup', 'keypress', 'blur', 'change'].forEach((eventName) => {
  element.addEventListener(eventName, validate);
});