jQuery wiele zdarzeń do uruchomienia tej samej funkcji

W jQuery 1.7 metoda .on() jest preferowaną metodą dołączania programów obsługi zdarzeń do dokumentu. We wcześniejszych wersjach Metoda .bind() jest używana do dołączania obsługi zdarzeń bezpośrednio do elementów.

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

Szukałem sposobu, aby uzyskać Typ zdarzenia, gdy jQuery nasłuchuje kilku zdarzeń naraz, a Google umieścił mnie tutaj.

Więc dla zainteresowanych, event.type jest moja odpowiedź:

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

Więcej informacji w jQuery doc .

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

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

Inną opcją jest użycie obsługi łańcucha jQuery api.

Jeśli dołączysz ten sam mechanizm obsługi zdarzeń do kilku zdarzeń, często napotkasz problem z uruchomieniem więcej niż jednego z nich na raz(np. naciśnięcie klawisza tab po edycji; keydown, change i blur mogą zostać uruchomione).

Wygląda na to, że to, czego naprawdę chcesz, jest czymś takim:

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

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

var foo = function() {...}

I później możesz ustawić dowolną liczbę detektorów zdarzeń, które chcesz wywołać w obiekcie, używając funkcji on('event'), pozostawiając odstęp między nimi, jak pokazano poniżej:

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

Tak to robię.

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

Odpowiedź Tatu brzmi, jak bym to intuicyjnie zrobił, ale w Internet Explorerze napotkałem pewne problemy z tym sposobem zagnieżdżania / wiązania zdarzeń, mimo że odbywa się to poprzez .on() metoda.

Nie byłem w stanie dokładnie określić, 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
• Mobile 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ż zdarzenia indywidualnie

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

"czy jest sposób na keyup, keypress, blur, i change zdarzenia wywołują tę samą funkcję w jednej linii?"

Możliwe jest użycie .on(), która przyjmuje następującą strukturę: .on( events [, selector ] [, data ], handler ), dzięki czemu można 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">

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

Ten samouczek dotyczy obsługi wielu zdarzeń.