Frage jQuery mehrere Ereignisse, um die gleiche Funktion auszulösen


Gibt es einen Weg zu haben? keyup, keypress, blur, und change Ereignisse rufen dieselbe Funktion in einer Zeile auf oder muss ich sie separat machen?

Das Problem, das ich habe, ist, dass ich einige Daten mit einem DB Lookup validieren muss und sicherstellen möchte, dass Validierung nicht in jedem Fall verpasst wird, ob es in das Feld getippt oder eingefügt wird.


802
2018-03-28 18:53


Ursprung


Antworten:


Sie können verwenden .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 einfach die Funktion als Parameter an normale Ereignisfunktionen:

var myFunction = function() {
   ...
}

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

1464
2018-03-28 18:56



Ab jQuery 1.7, der .on() Methode ist die bevorzugte Methode zum Anhängen von Ereignishandlern an ein Dokument. Für frühere Versionen .bind() Methode wird verwendet, um einen Event-Handler direkt an Elemente anzuhängen.

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

49
2017-11-14 08:14



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

Also, für die Interessierten, event.type ist meine Antwort:

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

Mehr Infos in der jQuery doc.


36
2018-05-14 22:00



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

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

Eine andere Möglichkeit ist die Verkettungsunterstützung von jquery api.


19
2018-03-28 18:55



Wenn Sie denselben Ereignishandler an mehrere Ereignisse anhängen, stoßen Sie oft auf das Problem, dass mehrere gleichzeitig ausgelöst werden (z. B. wenn der Benutzer nach der Bearbeitung auf die Tabulatortaste drückt, können die Tastenfolge, Änderung und Unschärfe ausgelöst werden).

Es klingt wie das, was du eigentlich willst, ist etwa so:

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

12
2018-03-28 19:33



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

var foo = function() {...}

Und später können Sie beliebig viele Ereignis-Listener auf Ihr Objekt setzen, um diese Funktion mit on ('event') auszulösen, indem Sie ein Leerzeichen dazwischen lassen, wie unten gezeigt:

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

10
2018-04-08 17:51



So mache ich es.

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

6
2017-11-09 12:46



Die Antwort von Tatu ist, wie intuitiv ich es tun würde, aber ich habe einige Probleme in Internet Explorer mit dieser Art der Verschachtelung / Bindung der Ereignisse erfahren, obwohl es durch die .on() Methode.

Ich konnte nicht genau feststellen, mit welchen Versionen von jQuery das Problem verbunden ist. Aber manchmal sehe ich das Problem in den folgenden Versionen:

  • 2.0.2
  • 1.10.1
  • 1.6.4
  • Mobil 1.3.0b1
  • Mobil 1.4.2
  • Mobil 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);

Das ist nicht die schönste Lösung, aber es funktioniert für mich, und ich dachte, ich würde es dort hinstellen, um anderen zu helfen, die über dieses Thema stolpern könnten


4
2018-04-07 08:57



"Gibt es einen Weg zu haben? keyup, keypress, blur, und change Ereignisse rufen dieselbe Funktion in einer Zeile auf? "

Es ist möglich mit .on(), die die folgende Struktur akzeptiert: .on( events [, selector ] [, data ], handler ), sodass Sie mehrere Ereignisse an diese Methode übergeben können. 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">


2
2017-09-26 19:16



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

Dieses Tutorial geht es um die Behandlung mehrerer Ereignisse.


0
2018-04-22 08:47