jQuery Tutorial (Teil 4) - Event Listeners

Werbung

Heute werden wir es noch ein bisschen besser machen und zeigen, wo jQuery glänzt - Events . Wenn Sie die vorherigen Tutorials befolgt haben, sollten Sie nun die grundlegende Code-Struktur von jQuery kennen. JQuery Tutorial - Erste Schritte: Grundlagen und Selektoren jQuery Tutorial - Erste Schritte: Grundlagen und Selektoren Letzte Woche habe ich darüber gesprochen, wie wichtig jQuery ist für jeden modernen Webentwickler und warum es großartig ist. Diese Woche, denke ich, ist es an der Zeit, dass wir uns die Hände schmutzig machen mit etwas Code und gelernt haben, wie ... Lesen Sie mehr (und all die schrecklichen geschweiften Klammern, die damit einhergehen), sowie wie finden Sie Elemente des DOM und einige der Dinge, die Sie kann tun, um sie zu manipulieren Einführung in jQuery (Teil 2): ​​Methoden und Funktionen Einführung in jQuery (Teil 2): ​​Methoden und Funktionen Dies ist Teil einer laufenden Anfänger Einführung in jQuery Web-Programmier-Serie. Teil 1 behandelte die Grundlagen von jQuery, wie man es in Ihr Projekt einfügt, und Selektoren. In Teil 2 werden wir mit ... weiterlesen. Ich habe Ihnen auch gezeigt, wie Sie auf die Entwicklerkonsole in Chrome Figure Out Website-Probleme mit Chrome-Entwickler-Tools oder Firebug Figure Out Website-Probleme mit Chrome-Entwickler-Tools oder Firebug Wenn Sie meine jQuery Tutorials bisher verfolgt haben, sind Sie möglicherweise bereits aufgetreten einige Code-Probleme und nicht bekannt, wie sie zu beheben sind. Wenn Sie mit einem nicht funktionierenden Bit Code konfrontiert sind, ist es sehr ... Lesen Sie mehr und wie Sie es verwenden könnten, um Ihren jQuery-Code zu debuggen.

Mit Events können Sie unter anderem auf Dinge reagieren, die auf der Seite passieren, und auf Benutzerinteraktionen reagieren - durch Klicken, Scrollen und all diese tollen Dinge.

Was ist ein Ereignis?

Für diejenigen, die neu bei der Programmierung sind, die eine graphische Schnittstelle irgendeiner Art beinhaltet, beziehen sich Ereignisse auf irgendeine Art von Interaktion zwischen dem Benutzer und der Anwendung; oder kann intern von einem anderen Prozess generiert werden. Anwendungen wählen aus, auf welche Ereignisse "gewartet" werden soll, und wenn dieses Ereignis ausgelöst wird, können sie auf irgendeine Weise reagieren.

Wenn Sie beispielsweise auf Ihrem iPhone-Bildschirm antippen, wird ein einzelnes "Antippen-Ereignis" mit einer x, y-Koordinate genau dort erzeugt, wo Sie geklopft haben. Wenn Sie auf ein bestimmtes Objekt, z. B. eine Schaltfläche, getippt haben, war es wahrscheinlich, dass die Schaltfläche auf dieses Ereignis gewartet hat und entsprechende Aktionen ausführt. Wenn es nur ein leerer Teil der Oberfläche war, wurde nichts an das Ereignis angehängt und so wird nichts passieren.

Wenn Sie mit dem Finger über den Bildschirm fahren, wird ein anderes Ereignis generiert, das Informationen über den Start- und Endpunkt der Ziehbewegung und möglicherweise die Geschwindigkeit enthält. Ereignisse bieten uns eine einfache Möglichkeit, auf Dinge zu reagieren, die passieren .

Einfach: Klicken

Das vielleicht einfachste Ereignis, auf das Sie achten müssen, ist das Klickereignis, das ausgelöst wird, wenn ein Benutzer auf ein Element klickt. Dies muss kein spezieller "Knopf" sein - Sie können einen Ereignis-Listener an alles auf dem Bildschirm anhängen, aber als Web-Entwickler müssen Sie das natürlich intuitiv machen. Das Erstellen eines Pseudoknopfes aus dem Buchstaben a innerhalb eines Textabschnitts ist möglich, aber etwas blöd.

Die Methoden zum Anhängen eines Ereignis-Listeners haben sich im Laufe der Jahre, die jQuery entwickelt hat, signifikant geändert, aber dies ist die derzeit akzeptierte Methode, die on () verwendet:

$(selector).on(event, action); 

Um auf ein beliebiges Element mit der Klasse .clickme auf ein "click" -Ereignis zu warten und anschließend eine Nachricht in der Konsole zu protokollieren, die den Text des angeklickten Elements enthält, würden Sie Folgendes tun:

 $(".clickme").on("click", function(){ console.log($(this).text()); }); 

Sie sollten sehen können, dass die Aktion, die wir hier eingebettet haben, eine anonyme Funktion ist, die den this- Selektor verwendet (der sich auf das Objekt bezieht, mit dem jQuery gerade arbeitet) - in diesem Fall auf das, auf das geklickt wurde. Wir extrahieren dann den Text des angeklickten Objekts und loggen es in die Konsole ein. Einfach richtig?

Stoppen Sie die Standardaktion:

Irgendwann möchten Sie etwas wie einen Link oder einen Formular-Senden-Button anhängen, der normalerweise etwas anderes tut. In diesem Fall ist es sehr wahrscheinlich, dass Sie nicht möchten, dass die ursprüngliche Aktion ausgeführt wird - stattdessen möchten Sie etwas ausgefallenes AJAX oder spezielle jQuery-Magie verwenden.

Um diese Standardaktion zu verhindern, haben wir eine praktische Methode namens preventDefault. Offensichtlich. Sehen wir uns an, wie das bei einem Submit-Button für ein Formular funktioniert

 $("#myForm").on("submit", function(event){ console.log(event); event.preventDefault(); return false; }); 

Ein paar Änderungen hier - zuerst fügen wir dem Submit- Ereignis statt einem Klick hinzu. Dies ist besser geeignet, wenn Sie mit einem Formular arbeiten, da der Benutzer ein Tabulatorzeichen eingeben, die Eingabetaste drücken oder auf eine Übergabeschaltfläche klicken könnte. All dies würde die Standardaktion des Formulars auslösen. Wir übergeben auch die Ereignisvariable in die anonyme Funktion, sodass wir auf die Ereignisdaten verweisen können . Wir haben dann die Funktion event.preventDefault () in Kombination mit return false verwendet, um alle üblichen Aktionen zu beenden.

In diesem Fall wird das Ereignis nur auf der Konsole protokolliert, aber in Wirklichkeit hätten Sie wahrscheinlich einen AJAX-Handler, den wir in der nächsten Lektion behandeln werden.

Ereignisse können auch von Ihnen ausgelöst werden

In den letzten beiden Beispielen haben wir die on-Methode verwendet, um ein Ereignis anzuhören, aber Sie können ein Ereignis auch manuell auslösen, indem Sie es stattdessen als Methode aufrufen. Es ist schwer zu verstehen, warum Sie dies verwenden können, um ein "Klicken" zu erzwingen, aber es macht mehr Sinn, wenn wir uns das Fokusereignis anschauen.

Der Fokus wird normalerweise mit Eingabefeldern verwendet, um eine Nachricht auszulösen, wenn der Benutzer in das Feld klickt, um Text einzugeben - beispielsweise eine Anweisungsnachricht für das zu verwendende Format. Sie können ihn jedoch auch verwenden, um den Benutzer in das Feld "Benutzername" zu zwingen, wenn die Seite geladen wurde. So können sie sofort mit der Eingabe ihrer Anmeldedaten beginnen.

 $(document).ready(function(){ $('#username'.focus(); }); 

Wenn Sie diesem Feld für den Benutzernamen auch einen Fokus-Ereignis-Listener hinzugefügt haben, wird dieser auch ausgelöst, wenn Sie den Fokus erzwingen. Ereignisse können daher sowohl ausgelöst als auch abgehört werden.

Im Moment üben Sie, indem Sie verschiedene Ereignisse auf der Seite anhängen - Sie können eine vollständige Liste aller hier verfügbaren Ereignisse finden - denken Sie daran, preventDefault zu verwenden, wenn es eine Verknüpfung oder Schaltfläche ist und sehen Sie, welche Ausgabe Sie von der Konsole über Ereignisdaten erhalten.

Ich werde es heute dort lassen, da wir gegen Ende dieser Mini-Serie von jQuery Tutorials sind. Sie sollten am Ende selbstsicher genug sein, um einige jQuery auf Ihre Seite zu werfen und etwas machen zu lassen. Nächste Woche schauen wir uns AJAX an - ein wichtiger Teil des modernen Internets, mit dem Sie Anfragen im Hintergrund laden und senden können, ohne den Benutzer zu unterbrechen.

Wie immer sind Feedback, Fragen, Kommentare und Probleme willkommen.

Bildnachweis: Touchscreen über Shutterstock