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

976

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.

shaneburgess
źródło

Odpowiedzi:

1791

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)
Tatu Ulmanen
źródło
3
W przypadku zdarzeń oddzielonych spacją, w jaki sposób uwzględnić także odstępy między nazwami? .on('keyup.foo keypress.foo blur.foo change.foo', …)czy .on('keyup keypress blur change .foo', …)?
Sukima,
24
Problem polega na tym, że myFunction prawdopodobnie zostanie wywołany wiele razy, czemu możesz zapobiec.
Esger
2
Jak mogę przekazać parametr w tej funkcji?
kushalvm
@ Esger W każdym razie, aby to zrobić? W telefonach komórkowych zawsze muszę on('click tap', e => {...}). Słuchacz może być wyzwalany dwukrotnie, chcę tylko raz uruchomić, jak mogę zakodować funkcję słuchacza?
tomision
9
@Tomlsion Być może dodaj nazwę klasy „zajęty” do elementu w wywoływanej funkcji, a następnie w $('#element:not(.busy)').on('keyup keypress blur change', function(e){…});końcu usuń nazwę klasy „zajęty”.
Esger,
60

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");
})
Lesyk
źródło
1
Odbywa się to w przypadku wydarzenia delegowanego, będzie działać, ale nie jest to najprostszy sposób, ani najbardziej wydajny.
Ben Taliadoros
1
Delegowanie zdarzeń jest ważne i może (ale nie musi) być wymagane w zależności od tego, kiedy skrypt jest ładowany / uruchamiany, oraz czy elementy istnieją w DOM w momencie ładowania / uruchamiania skryptu.
random_user_name
45

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 .

Alain Tiemblo
źródło
24

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.

Giorgi
źródło
9
Począwszy od jQuery 1.7, metoda .on () jest preferowaną metodą dołączania procedur obsługi zdarzeń do dokumentu.
Dzhuneyt,
18

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.
});
Dave Ward
źródło
14

Tak to robię.

$("input[name='title']").on({
    "change keyup": function(e) {
        var slug = $(this).val().split(" ").join("-").toLowerCase();
        $("input[name='slug']").val(slug);
    },
});
Sajjad Ashraf
źródło
11

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);
Coder Of The Galaxy
źródło
3
Ogólnie powinieneś wyjaśnić swoją odpowiedź. Samo wklejenie kodu nie pomaga OP zrozumieć jego problemu lub rozwiązania.
leigero
co jeśli potrzebuję pierwszego argumentu w funkcji subskrybenta zdarzenia jquery (zdarzenie)? Jak tego użyć?
Dr.X
W porządku, możesz po prostu zadeklarować funkcję za pomocą parametru zdarzenia, a następnie uzyskać do niej dostęp z poziomu metody. Wydarzenia te przejdą przez obiekt same w sobie. Mam nadzieję, że to pomoże. var foo = function (event) {console.log (event); } $ ('# selektor'). on ('naciśnięcie klawisza zmiana rozmycia zmiany wklej wycięcie', foo);
Coder Of The Galaxy,
7

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

Squazz
źródło
5
$("element").on("event1 event2 event..n", function() {
   //execution
});

Ten samouczek dotyczy obsługi wielu zdarzeń.

Gość
źródło
4

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">

Komercyjne samobójstwo
źródło
2

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);
});
CertainPerformance
źródło