Die Behandlung von Ereignissen ist ein weiterer wichtiger Grund für die Verwendung von jQuery. Es gibt einige browserübergreifende Unterschiede in der Vorgehensweise, die jQuery in einer einfachen API normalisiert und gleichzeitig einige bewährte Methoden erzwingt.
Es gibt im Wesentlichen eine Methode, die Sie kennen müssen: .on()- Sie funktioniert folgendermaßen:
$("button").on("click", function() ( // do something ));Hier geben wir der .on()Methode nur zwei Parameter. Der Name des Ereignisses („Klick“) und eine Funktion, die ausgeführt werden soll, wenn dieses Ereignis für eines der Elemente in dieser Auswahl auftritt. Liest ziemlich sauber, nicht wahr?
Menschen mit einer früheren jQuery Erfahrung könnten sein , vertraut mit anderen Bindungsmethoden wie .bind(), .live()oder .delegate(). Machen Sie sich keine Sorgen mehr, das moderne jQuery hat sie alle kombiniert, .on()was immer die beste Vorgehensweise darstellt.
Wenn Sie ein Ereignis wie oben beschrieben binden, können Sie (und es ist normalerweise klug) einen Parameternamen in die Funktion aufnehmen. Dieser Parameter ist das Ereignisobjekt innerhalb der Funktion:
$("button").on("click", function(event) ( // event => "the event object" ));Durch dieses Ereignisobjekt erhalten Sie viele Informationen. Du bist schon ein bisschen vertraut damit, weil wir es gewohnt sind .preventDefault()und .stopPropagation(). Es gibt aber auch viele andere direkte Informationen in diesem Objekt. Dinge wie die Art des Ereignisses (falls mehrere Ereignisse dieselbe Funktion auslösen), wann es passiert ist, wo es passiert ist (Koordinaten, falls zutreffend), auf welchem Element es passiert ist und vieles mehr. Es lohnt sich, das Ereignisobjekt beim Codieren regelmäßig zu überprüfen.
Es gibt ein Konzept der Ereignisdelegation, das für die Arbeit mit Ereignissen äußerst wichtig ist. Es ist eine sehr kluge moderne Best Practice. Es beinhaltet die Idee des Umfangs.
Eine traditionelle Art, über die Ereignisbindung nachzudenken, lautet: "Finde alle Schaltflächen auf der Seite und binde ein Klickereignis an sie." Das funktioniert natürlich, aber es ist:
- Nicht sehr effizient
- Fragil
Nicht effizient, da Sie JavaScript sofort zwingen, alle diese Schaltflächenelemente zu finden, wenn Sie mit der Delegierung möglicherweise nur ein leichter zu findendes Element finden.
Zerbrechlich, denn wenn der Seite weitere Schaltflächen hinzugefügt werden, haben sie das Boot auf der Bindung bereits verpasst und müssen erneut gebunden werden.
Bei der Ereignisdelegierung binden Sie dieses Klickereignis an ein Element, das höher im DOM-Baum liegt als die Schaltflächen, die zufällig alle enthalten. Könnte irgendwo sein, könnte das documentselbst sein. Wenn Sie das Klickereignis an dieses übergeordnete Element binden, teilen Sie ihm mit, dass Sie immer noch nur an Klicks interessiert sind, die auf Schaltflächen ausgeführt wurden. Wenn dann auf eine Schaltfläche geklickt wird, wird dieser Klick aufgrund der Art des Ereignisblasens möglicherweise auf das übergeordnete Element ausgelöst. Das Ereignisobjekt weiß jedoch, ob der ursprüngliche Klick auf eine Schaltfläche erfolgt ist oder nicht, und die Funktion, die Sie für dieses Ereignis festgelegt haben, wird entweder ausgelöst oder nicht, wenn Sie diese Informationen kennen.
In diesem Screencast zeigen wir Folgendes:
$("#scope").on("click", "textarea", function(event) ( // Do stuff! console.log(event); ));Nun stell dir vor , wenn wir eine weitere hinzugefügt zu , dass . Wir müssen keine Ereignisse erneut binden, da das Ereignis immer noch glücklich an den Umfang gebunden ist und Ereignisse immer noch aus dem neu hinzugefügten Textbereich sprudeln. Dies ist besonders nützlich in Web-App-Umgebungen, in denen Sie der Seite regelmäßig neue Elemente hinzufügen.
Eine weitere gute Sache, die Sie über die Bindung von jQuery-Ereignissen wissen sollten, ist, dass sie sich nicht gegenseitig ausschließen. Wenn Sie dem gleichen Element, das bereits einen hat, einen weiteren Klick-Handler hinzufügen, wird nur ein weiterer hinzugefügt. Sie überschreiben den vorherigen nicht. jQuery erledigt dies nur ziemlich elegant für Sie. Sie können sie jederzeit aufheben, wenn Sie tatsächlich eine zuvor gebundene Funktion überschreiben möchten.
Wenn es sich genau um dasselbe Ereignis handelt, sollten Sie wissen, dass Sie die Ereignisse mit einem Namespace versehen müssen, um ein bestimmtes Ereignis und nicht das andere zu lösen. Dies geschieht durch Verwendung eines Punkts im Ereignisnamen, wie z 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()Wie wir es noch nicht erwähnt haben, lösen Sie Ereignisse auf.
Es gibt viele mögliche DOM-Ereignisse. Klick ist das große Hauptproblem, aber es gibt Doppelklick, Mouseenter und Mouseleave, Keydown und Keyup, Formulare wie Unschärfe und Veränderung und vieles mehr. Wenn Sie an der vollständigen Liste interessiert sind, können Sie eine solche erhalten.
Sie können mehrere Ereignisse gleichzeitig wie folgt binden:
$("#scope").on("keydown keyup", "textarea", function(event) ( console.log(event.keyCode); ));Unter bestimmten Umständen warten Sie darauf, dass ein Ereignis eintritt, aber sobald dies der Fall ist, interessiert es Sie nicht mehr oder Sie möchten die Funktion, die Sie gebunden haben, explizit nicht mehr auslösen. Darum geht es in der .one()Funktion. Ein Standardanwendungsfall hierfür ist eine Schaltfläche zum Senden von Formularen (wenn Sie mit Ajax oder was auch immer arbeiten). Wahrscheinlich möchten Sie diese Senden-Schaltfläche nach dem Drücken im Wesentlichen deaktivieren, bis Sie diese Informationen verarbeiten und ihnen das entsprechende Feedback geben können. Das ist natürlich nicht der einzige Anwendungsfall, aber denken Sie daran. .one()== nur einmal.