jQuery mehrere Ereignisse, um dieselbe Funktion auszulösen

977

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.

shaneburgess
quelle

Antworten:

1794

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)
Tatu Ulmanen
quelle
3
Wie schließen Sie bei durch Leerzeichen getrennten Ereignissen auch den Namensabstand ein? .on('keyup.foo keypress.foo blur.foo change.foo', …)oder .on('keyup keypress blur change .foo', …)?
Sukima
24
Das Problem dabei ist, dass myFunction wahrscheinlich mehrmals aufgerufen wird, was Sie möglicherweise verhindern möchten.
Esger
2
Wie kann ich Parameter in dieser Funktion übergeben?
Kushalvm
@Esger Wie auch immer, um das zu tun? Im Handy muss ich immer on('click tap', e => {...}). Der Listener kann zweimal ausgelöst werden. Ich möchte nur einmal auslösen. Wie kann ich in der Listener-Funktion codieren?
Tomision
9
@Tomlsion Fügen Sie dem Element in der aufgerufenen Funktion möglicherweise einen Klassennamen 'beschäftigt' hinzu, und $('#element:not(.busy)').on('keyup keypress blur change', function(e){…});entfernen Sie schließlich den Klassennamen 'beschäftigt'.
Esger
60

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");
})
lesyk
quelle
1
Dies wird für eine delegierte Veranstaltung durchgeführt, es wird funktionieren, aber es ist weder die einfachste noch die effizienteste Methode.
Ben Taliadoros
1
Die Ereignisdelegierung ist wichtig und kann erforderlich sein (oder auch nicht), je nachdem, wann das Skript geladen / ausgeführt wird und ob die Elemente zum Zeitpunkt des Ladens / Ausführens des Skripts im DOM vorhanden sind.
random_user_name
45

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 .

Alain Tiemblo
quelle
24

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.

Giorgi
quelle
9
Ab jQuery 1.7 ist die Methode .on () die bevorzugte Methode zum Anhängen von Ereignishandlern an ein Dokument.
Dzhuneyt
18

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.
});
Dave Ward
quelle
14

So mache ich es.

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

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);
Codierer der Galaxie
quelle
3
Im Allgemeinen sollten Sie Ihre Antwort erklären. Das einfache Einfügen von Code hilft dem OP nicht, das Problem oder Ihre Lösung zu verstehen.
Leigero
Was ist, wenn ich das erste Argument in der Abonnentenfunktion (Ereignis) für jquery-Ereignisse benötige? Wie benutzt man es?
Dr.X
Das ist in Ordnung, Sie können die Funktion einfach mit dem Ereignisparameter deklarieren und dann über die Methode darauf zugreifen. Diese Ereignisse übergeben das Objekt an sich. Ich hoffe das hilft. var foo = Funktion (Ereignis) {console.log (Ereignis); } $ ('# selector'). on ('Tastendruck, Unschärfe, Änderung, Einfügen, Ausschneiden', foo);
Coder Of The Galaxy
7

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

Squazz
quelle
4

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

Kommerzieller Selbstmord
quelle
2

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);
});
Bestimmte Leistung
quelle