jQuery-Äquivalent zur addEventListener-Methode von JavaScript

190

Ich versuche, das jQuery-Äquivalent dieses JavaScript-Methodenaufrufs zu finden:

document.addEventListener('click', select_element, true);

Ich bin so weit gekommen:

$(document).click(select_element);

Dies führt jedoch nicht zum gleichen Ergebnis wie der letzte Parameter der JavaScript-Methode - ein Boolescher Wert, der angibt, ob der Ereignishandler in der Erfassungs- oder Blasenphase ausgeführt werden soll (nach meinem Verständnis von http://www.quirksmode.org) /js/events_advanced.html ) - wird weggelassen .

Wie spezifiziere ich diesen Parameter oder erreiche auf andere Weise dieselbe Funktionalität mit jQuery?

javascript jquery events event-handling dom-events Patzer
quelle
3
Die Ereigniserfassung wird von jQuery nicht unterstützt, da die Ereigniserfassung nicht vom IE unterstützt wird, den jQuery unterstützt;) Suchen Sie nach IE-Kompatibilität?
Crescent Fresh
Danke, Crescent Fresh - ich denke, das macht jetzt Sinn. Ich brauche IE-Kompatibilität, also muss ich wohl die Erfassungsphase vergessen.
Bungle

Antworten:

142

Nicht alle Browser unterstützen die Ereigniserfassung (z. B. Internet Explorer-Versionen unter 9 nicht), aber alle unterstützen das Sprudeln von Ereignissen. Aus diesem Grund werden in dieser Phase Handler an Ereignisse in allen browserübergreifenden Abstraktionen gebunden, einschließlich jQuery.

Das, was in jQuery am nächsten kommt, ist die Verwendung bind()(ersetzt durch on()jQuery 1.7+) oder die ereignisspezifischen jQuery-Methoden (in diesem Fall click(), die bind()ohnehin intern aufgerufen werden). Alle nutzen die Blasenphase eines erhöhten Ereignisses.

Russ Cam
quelle
6
Es sieht so aus, als ob IE9 es endlich unterstützt. blogs.msdn.com/b/ie/archive/2010/03/26/…
einige
und warum unterstützen sie die Ereigniserfassung nicht? Was sind die Nachteile der Ereigniserfassung?
Aakash
2
Um ganz klar zu sein, Sie sagen, dass das, was das OP will, nicht möglich ist - dass Sie Blasen verwenden müssen und keine Erfassung verwenden können. Richtig?
Noumenon
115

Ab jQuery 1.7 .on()ist dies nun die bevorzugte Methode zum Binden von Ereignissen anstelle von .bind():

Von http://api.jquery.com/bind/ :

Ab jQuery 1.7 ist die Methode .on () 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. Handler werden an die aktuell ausgewählten Elemente im jQuery-Objekt angehängt, sodass diese Elemente an dem Punkt vorhanden sein müssen, an dem der Aufruf von .bind () erfolgt. Eine flexiblere Ereignisbindung finden Sie in der Diskussion zur Ereignisdelegierung in .on () oder .delegate ().

Die Dokumentationsseite befindet sich unter http://api.jquery.com/on/


quelle
Die akzeptierte Antwort wurde bearbeitet, um dies zu beheben.
Benutzer, der kein Benutzer ist
14

Eine Sache zu beachten ist , dass jQuery Ereignismethoden nicht Feuer / Falle loadauf embedTags , die SVG DOM enthalten , die Lasten als separates Dokument im embedTag. Die einzige Möglichkeit, ein loadEreignis in diesen Fällen abzufangen, war die Verwendung von rohem JavaScript.

Das wird nicht funktionieren (ich habe versucht , on/ bind/ loadMethoden):

$img.on('load', function () {
    console.log('FOO!');
});

Dies funktioniert jedoch:

$img[0].addEventListener('load', function () {
    console.log('FOO!');
}, false);
tbjers
quelle
1
Es ist zu beachten, dass dies der richtige Weg ist, wenn Sie keine anderen gebundenen Ereignishandler für die Elemente überschreiben möchten.
r3wt
was ist das $img?
Anatol
12

Sie sollten jetzt die .on()Funktion verwenden, um Ereignisse zu binden.


quelle
2 

$( "button" ).on( "click", function(event) {

    alert( $( this ).html() );
    console.log( event.target );

} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<button>test 1</button>
<button>test 2</button>
Erweitern Sie das Snippet

Anteliebe
quelle
1

Im Mozilla Development Network (MDN) finden Sie eine hervorragende Beschreibung dieses Problems für Standard-JavaScript (wenn Sie sich nicht auf jQuery verlassen oder es allgemein besser verstehen möchten):

https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener

Hier ist eine Diskussion des Ereignisflusses von einem Link in der obigen Behandlung:

http://www.w3.org/TR/DOM-Level-3-Events/#event-flow

Einige wichtige Punkte sind:

  • Es ermöglicht das Hinzufügen von mehr als einem Handler für ein Ereignis
  • Es gibt Ihnen eine feinkörnigere Kontrolle über die Phase, in der der Hörer aktiviert wird (Erfassen vs. Sprudeln).
  • Es funktioniert mit jedem DOM-Element, nicht nur mit HTML-Elementen
  • Der an das Ereignis übergebene Wert von "this" ist nicht das globale Objekt (Fenster), sondern das Element, von dem aus das Element ausgelöst wird. Das ist sehr praktisch.
  • Der Code für ältere IE-Browser ist einfach und unter der Überschrift "Legacy Internet Explorer und attachEvent" enthalten.
  • Sie können Parameter einschließen, wenn Sie den Handler in eine anonyme Funktion einschließen
Xitalogie
quelle