#13: Einführung in Events

Das Handling von Events ist ein weiterer wichtiger Grund für die Verwendung von jQuery. Es gibt einige browserübergreifende Unterschiede bei der Vorgehensweise, die jQuery zu einer einzigen, einfachen API normalisiert und gleichzeitig einige Best Practices erzwingt.

Es gibt im Wesentlichen eine Methode, die du kennen musst: .on() – sie funktioniert so

$("button").on("click", function() {
  // do something
});

Hier übergeben wir der Methode .on() nur zwei Parameter. Den Namen des Events („click“) und eine Funktion, die ausgeführt wird, wenn dieses Event bei einem der Elemente in dieser Auswahl auftritt. Liest sich ziemlich sauber, oder?

Personen mit Vorkenntnissen in jQuery sind möglicherweise mit anderen Bindungsmethoden wie .bind(), .live() oder .delegate() vertraut. Mach dir keine Sorgen mehr darum, das moderne jQuery hat sie alle in .on() zusammengefasst, was immer die beste Vorgehensweise ist.

Beim Binden eines Events, wie wir es oben getan haben, kannst du (und es ist typischerweise ratsam) einen Parameternamen in die Funktion aufnehmen. Dieser Parameter wird innerhalb der Funktion „das Event-Objekt“ sein.

$("button").on("click", function(event) {
  // event => "the event object"
});

Über dieses Event-Objekt erhältst du viele Informationen. Du bist damit bereits ein wenig vertraut, da wir es verwendet haben, um .preventDefault() und .stopPropagation() aufzurufen. Aber es gibt auch viele andere direkte Informationen in diesem Objekt. Dinge wie die Art des Events (falls mehrere Events dieselbe Funktion auslösen), wann es aufgetreten ist, wo es aufgetreten ist (Koordinaten, falls zutreffend), auf welchem Element es aufgetreten ist und vieles mehr. Es lohnt sich, das Event-Objekt beim Programmieren regelmäßig zu inspizieren.

Es gibt ein Konzept der Event-Delegation, das für die Arbeit mit Events extrem wichtig ist. Es ist eine sehr kluge moderne Best Practice. Sie bezieht die Idee des Geltungsbereichs (scope) mit ein.

Eine traditionelle Art, über Event-Binding nachzudenken, ist wie: „Finde alle Buttons auf der Seite und binde ein Click-Event daran.“ Das funktioniert natürlich, ist aber

• Nicht sehr effizient
• Zerbrechlich

Nicht effizient, da du JavaScript sofort zwingst, alle diese Button-Elemente zu finden, während du mit Delegation nur ein leichter zu findendes Element finden könntest.

Zerbrechlich, da wenn mehr Buttons zur Seite hinzugefügt werden, diese bereits den Anschluss verpasst haben und neu gebunden werden müssen.

Mit Event-Delegation würdest du dieses Click-Event an ein Element binden, das sich höher im DOM-Baum befindet als die Buttons, die es enthält. Das könnte ein <div> irgendwo sein, es könnte das document selbst sein. Wenn du das Click-Event an dieses weiter oben liegende Element bindest, sagst du ihm, dass du immer noch nur an Klicks interessiert bist, die auf Buttons aufgetreten sind. Wenn dann ein Button geklickt wird, wird dieser Klick durch die Natur des Event-Bubbling schließlich das weiter oben liegende Element auslösen. Aber das Event-Objekt wird wissen, ob der ursprüngliche Klick auf einem Button aufgetreten ist oder nicht, und die Funktion, die du für dieses Event eingestellt hast, wird entweder ausgeführt oder nicht ausgeführt, basierend auf dieser Information.

In diesem Screencast demonstrieren wir das so:

<div id="scope">
  <textarea></textarea>
</div>

$("#scope").on("click", "textarea", function(event) {
  
  // Do stuff!
  console.log(event);
  
});

Stellen Sie sich nun vor, wir fügen ein weiteres <textarea> zu diesem <div id="scope"> hinzu. Wir müssen keine Events neu binden, da das Event immer noch glücklich an den Geltungsbereich gebunden ist und Events immer noch vom neu hinzugefügten Textfeld nach oben aufsteigen werden. Dies ist besonders nützlich in Webanwendungs-Umgebungen, in denen Sie regelmäßig neue Elemente zur Seite hinzufügen.

Eine weitere gute Sache, die man über jQuery Event-Binding wissen sollte, ist, dass sie sich nicht gegenseitig ausschließen. Wenn du einen weiteren Click-Handler an dasselbe Element hinzufügst, das bereits einen hat, wird einfach ein weiterer hinzugefügt. Du überschreibst nicht den vorherigen. jQuery handhabt das ziemlich elegant für dich. Du kannst sie jederzeit wieder unbinden, wenn du tatsächlich eine zuvor gebundene Funktion überschreiben wolltest.

Wenn es sich um dasselbe Event handelt, ist es erwähnenswert, dass du, um eines davon gezielt zu unbinden und nicht das andere, die Events benennen (namespace) musst. Das geschieht durch die Verwendung eines Punkts im Eventnamen, z. B. click.namespace.

$("#scope").on("click.one", "textarea", function(event) {  });
$("#scope").on("click.two", "textarea", function(event) {  });

// Just remove the first
$("#scope").off("click.one", "textarea");

.off() ist, da wir es bisher nicht erwähnt haben, wie du Events unbindest.

Es gibt viele mögliche DOM-Events. Click ist das große, offensichtliche Haupt-Event, aber es gibt Doppelklick, mouseenter und mouseleave, keydown und keyup, formularspezifische wie blur und change und *unzählige* mehr. Wenn du an der vollständigen Liste interessiert bist, findest du eine so.

Du kannst mehrere Events gleichzeitig so binden:

$("#scope").on("keydown keyup", "textarea", function(event) {
  console.log(event.keyCode); 
});

Es gibt Umstände, unter denen du auf ein Event wartest, aber sobald es auftritt, ist es dir egal oder du möchtest explizit nicht mehr die Funktion auslösen, die du gebunden hattest. Dafür ist die Funktion .one() da. Ein typischer Anwendungsfall dafür ist ein Formular-Submit-Button (wenn du mit Ajax oder etwas anderem arbeitest). Wahrscheinlich möchtest du diesen Submit-Button im Wesentlichen deaktivieren, nachdem der Benutzer ihn gedrückt hat, bis du die Informationen verarbeiten und ihm das entsprechende Feedback geben kannst. Das ist natürlich nicht der einzige Anwendungsfall, aber behalte das im Hinterkopf. .one() == nur einmal.