it-swarm.com.de

Mehrere Ereignisse abfragen, um dieselbe Funktion auszulösen

Gibt es eine Möglichkeit, keyup-, keypress-, blur- und change -Ereignisse dieselbe Funktion in einer Zeile aufzurufen, oder muss ich sie separat ausführen?

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

914
shaneburgess

Sie können .on() verwenden, um eine Funktion an mehrere Ereignisse zu binden:

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

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

var myFunction = function() {
   ...
}

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

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 Methode .bind() verwendet, um einen Ereignishandler direkt an Elemente anzuhängen.

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

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

Für alle Interessierten ist event.type meine Antwort:

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

Weitere Informationen in der jQuery doc .

43
Alain Tiemblo

Sie können Bindungsmethode verwenden, um eine Funktion an mehrere Ereignisse anzuhängen. Übergeben Sie einfach die Ereignisnamen und die Handlerfunktion wie folgt:

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

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

22
Giorgi

Wenn Sie denselben Ereignishandler an mehrere Ereignisse anhängen, tritt häufig das Problem auf, dass mehrere Ereignisse gleichzeitig ausgelöst werden (z. B. wenn der Benutzer nach der Bearbeitung die Tabulatortaste drückt; das Herunterfahren, Ändern und Verwischen aller Ereignisse kann ausgelöst werden).

Es hört sich so an, als ob Sie tatsächlich Folgendes wollen:

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

So mache ich es.

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

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 auf Ihrem Objekt diese Funktion auslösen sollen, indem Sie on ('event') verwenden und ein Leerzeichen dazwischen lassen, wie unten gezeigt:

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

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

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

  • 2.0.2
  • 1.10.1
  • 1.6.4
  • Mobile 1.3.0b1
  • Mobile 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 dort veröffentlichen, um anderen zu helfen, die über dieses Problem stolpern könnten

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

Dieses Tutorial behandelt mehrere Ereignisse.

4
Guest

"Gibt es eine Möglichkeit, keyup, keypress, blur und change Ereignisse die gleiche Funktion in einer Zeile aufzurufen?"

Es ist möglich, .on() zu verwenden, das die folgende Struktur akzeptiert: .on( events [, selector ] [, data ], handler ), sodass Sie dieser Methode mehrere Ereignisse übergeben können. In deinem 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">
3

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 - iterieren Sie über ein Array von Ereignisnamen und fügen Sie jeweils einen Listener hinzu:

function validate() {
  // ...
}

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