jQuery mehrere Ereignisse, um dieselbe Funktion auszulösen

Gibt es eine Möglichkeit haben keyup, keypress, blur, und changeEreignisse rufen die gleiche Funktion in einer Zeile oder muss ich sie separat zu tun?

Das Problem, das ich habe, ist, dass ich einige Daten mit einer Datenbank-Suche validieren muss und sicherstellen möchte, dass die Validierung auf keinen Fall übersehen wird, unabhängig davon, ob sie eingegeben oder in das Feld eingefügt wurden.

Sie können .on()eine Funktion an mehrere Ereignisse binden:

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

Oder übergeben Sie die Funktion als Parameter einfach an normale Ereignisfunktionen:

var myFunction = function() {
   ...
}

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

Ab jQuery 1.7 ist die .on()Methode die bevorzugte Methode zum Anhängen von Ereignishandlern an ein Dokument. In früheren Versionen wird die .bind()Methode zum direkten Anhängen eines Ereignishandlers an Elemente verwendet.

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

Ich suchte nach einer Möglichkeit, den Ereignistyp zu ermitteln, wenn jQuery mehrere Ereignisse gleichzeitig abhört, und Google hat mich hierher gebracht.

Für Interessierte event.typeist meine Antwort:

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

Weitere Informationen finden Sie im jQuery-Dokument .

Sie können die Bindungsmethode verwenden , um Funktionen an mehrere Ereignisse anzuhängen. Übergeben Sie einfach die Ereignisnamen und die Handlerfunktion wie in diesem Code:

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

Eine weitere Option ist die Verwendung der Verkettungsunterstützung von jquery api.

Wenn Sie denselben Ereignishandler an mehrere Ereignisse anhängen, tritt häufig das Problem auf, dass mehrere von ihnen gleichzeitig ausgelöst werden (z. B. drückt der Benutzer nach der Bearbeitung die Tabulatortaste; Keydown, Ändern und Unschärfe können alle ausgelöst werden).

Es klingt so, als ob das, was Sie tatsächlich wollen, ungefähr so ​​ist:

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

So mache ich es.

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

Sie können die Funktion, die Sie wiederverwenden möchten, wie folgt definieren:

var foo = function() {...}

Und später können Sie festlegen, wie viele Ereignis-Listener für Ihr Objekt diese Funktion auslösen sollen, indem Sie on ('event') verwenden, wobei ein Leerzeichen dazwischen verbleibt, wie unten gezeigt:

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

Die Antwort von Tatu ist, wie ich es intuitiv machen würde, aber ich habe im Internet Explorer einige Probleme mit dieser Art des Verschachtelns / Bindens der Ereignisse festgestellt, obwohl dies über die .on()Methode erfolgt.

Ich konnte nicht genau bestimmen, bei welchen Versionen von jQuery dies das Problem ist. Aber ich sehe das Problem manchmal in den folgenden Versionen:

• 2.0.2
• 1.10.1
• 1.6.4
• Mobile 1.3.0b1
• Mobil 1.4.2
• Mobile 1.2.0

Meine Problemumgehung bestand darin, zuerst die Funktion zu definieren.

function myFunction() {
    ...
}

und dann die Ereignisse einzeln behandeln

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

Dies ist nicht die schönste Lösung, aber sie funktioniert für mich, und ich dachte, ich würde sie veröffentlichen, um anderen zu helfen, die über dieses Problem stolpern könnten

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

In diesem Tutorial werden mehrere Ereignisse behandelt.

Gibt es eine Möglichkeit haben keyup, keypress, blur, und changeEreignisse rufen die gleiche Funktion in einer Zeile?

Es ist möglich .on(), Folgendes zu verwenden , das die folgende Struktur akzeptiert: .on( events [, selector ] [, data ], handler )Sie können also mehrere Ereignisse an diese Methode übergeben. In Ihrem Fall sollte es so aussehen:

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

Und hier ist das Live-Beispiel:

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

Es ist einfach, dies mit den integrierten DOM-Methoden ohne eine große Bibliothek wie jQuery zu implementieren. Wenn Sie möchten, ist nur ein bisschen mehr Code erforderlich. Durchlaufen Sie ein Array von Ereignisnamen und fügen Sie für jeden einen Listener hinzu:

function validate() {
  // ...
}

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