web-dev-qa-db-ger.com

jQuery-Äquivalent der addEventListener-Methode von JavaScript

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

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

Ich bin so weit gekommen wie:

$(document).click(select_element);

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

Wie kann ich diesen Parameter angeben oder auf andere Weise mithilfe von jQuery die gleiche Funktionalität erzielen?

javascriptjqueryeventsjavascript-eventsevent-handling
178
Bungle

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 wird diese Phase verwendet, um Handler an Ereignisse in allen browserübergreifenden Abstraktionen zu binden, einschließlich jQuery.

Das, was Sie in jQuery am nächsten suchen, ist bind() (ersetzt durch on() in jQuery 1.7+) oder ereignisspezifische jQuery-Methoden (in diesem Fall click() , die bind() trotzdem intern aufrufen). Alle nutzen die Sprudelphase eines erhöhten Ereignisses.

134
Russ Cam

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

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

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 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 der Ereignisdelegierung in .on () oder .delegate ().

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

110
user315772

Das Nächste wäre die Bindefunktion:

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

$('#foo').bind('click', function() {
  alert('User clicked on "foo."');
});
49
Ben Rowe

Zu beachten ist, dass jQuery-Ereignismethoden load nicht auf embed -Tags auslösen/abfangen, die SVG-DOM enthalten und als separates Dokument im embed -Tag geladen werden. Die einzige Möglichkeit, ein load -Ereignis für diese Ereignisse abzufangen, war die Verwendung von unformatiertem JavaScript.

Dies wird nicht funktionieren (ich habe versucht on/bind/load Methoden):

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

Dies funktioniert jedoch:

$img[0].addEventListener('load', function () {
    console.log('FOO!');
}, false);
14
tbjers

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

12
user370770

Im Folgenden finden Sie eine hervorragende Behandlung für Standard-JavaScript im Mozilla Development Network (MDN) dieser Ausgabe (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:

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