jQuery-Tutorial (Teil 4) - Ereignis-Listener

Heute werden wir es ein bisschen höher legen und zeigen, wo jQuery wirklich strahlt - Veranstaltungen. Wenn Sie die vorherigen Tutorials befolgt haben, sollten Sie jetzt ein gutes Verständnis für die grundlegende Codestruktur von jQuery haben. 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 zu jedem modernen Webentwickler und warum es großartig ist. Ich denke, es ist an der Zeit, dass wir uns mit Code ein wenig schmutzig machen und erfahren haben, wie… Lesen Sie mehr (und all die schrecklichen geschweiften Klammern, die damit einhergehen) und wie Sie Elemente des DOM finden und einige der Möglichkeiten, die Sie tun können Sie können sie manipulieren. Einführung in jQuery (Teil 2): ​​Methoden und Funktionen Einführung in jQuery (Teil 2): ​​Methoden und Funktionen Dies ist Teil einer laufenden Einführung in die jQuery-Webprogrammierserie. Teil 1 befasste sich mit den jQuery-Grundlagen, wie man sie in Ihr Projekt einfügt, und Selektoren. In Teil 2 fahren wir mit… Weiterlesen. Ich habe Ihnen außerdem gezeigt, wie Sie auf die Entwicklerkonsole in Chrome zugreifen können. Probleme mit Chrome Developer Tools oder Firebug herausfinden Probleme mit Chrome Developer Tools oder Firebug herausfinden Wenn Sie meine jQuery-Tutorials bisher befolgt haben, sind Sie möglicherweise bereits in der Lage einige Code-Probleme und nicht bekannt, wie sie behoben werden können. Wenn Sie mit einem nicht funktionalen Code konfrontiert werden, ist es sehr… Lesen Sie mehr und wie Sie es verwenden könnten, um Ihren jQuery-Code zu debuggen.

Mit Ereignissen - unter anderem - können Sie auf Ereignisse auf der Seite und auf Benutzerinteraktionen reagieren, z. B. durch Klicken, Scrollen und auf all die ausgefallenen Dinge.

Was ist sowieso ein Ereignis??

Bei Programmierern, die eine grafische Benutzeroberfläche erfordern, beziehen sich Ereignisse auf jede Art von Interaktion zwischen dem Benutzer und der Anwendung. oder kann intern von einem anderen Prozess generiert werden. Anwendungen wählen, zu welchen Ereignissen “hör auf”, und wenn dieses Ereignis ausgelöst wird, können sie auf irgendeine Weise reagieren.

Wenn Sie beispielsweise auf Ihrem iPhone-Bildschirm tippen, wird eine einzelne generiert “Tippen Sie auf Ereignis” mit einer xy-Koordinate, an der Sie gerade getippt haben. Wenn Sie wie bei einer Schaltfläche auf ein bestimmtes Objekt tippen, ist es wahrscheinlich, dass die Schaltfläche dieses Ereignis abgehört hat, und führt entsprechende Aktionen aus. Wenn es sich nur um einen leeren Teil der Benutzeroberfläche handelt, wurde nichts an das Ereignis angehängt, und daher wird nichts passieren.

Wenn Sie Ihren Finger über den Bildschirm ziehen, wird ein anderes Ereignis generiert, das Informationen zum Start- und Endpunkt der Ziehbewegung und möglicherweise zur Geschwindigkeit enthält. Veranstaltungen bieten uns einen einfachen Weg zu auf Dinge reagieren, die passieren.

Einfach: Klicken

Das wahrscheinlich einfachste Ereignis, auf das Sie hören können, ist das Klickereignis, das ausgelöst wird, wenn ein Benutzer auf ein Element klickt. Dies muss nicht spezifisch sein “Taste” - Sie können einen Ereignis-Listener an alles auf dem Bildschirm anhängen, aber als Web-Entwickler müssen Sie dies natürlich intuitiv machen. Einen Pseudo-Button aus dem Buchstaben erstellen ein verborgen in einem Textabschnitt ist möglich, aber etwas dumm.

Die Methoden zum Anhängen eines Ereignis-Listeners haben sich im Laufe der Jahre, als jQuery entwickelt wurde, erheblich geändert. Dies ist jedoch die derzeit akzeptierte Methode, die on () verwendet:

$ (Selektor) .on (Ereignis, Aktion);

Auf a hören “klicken” Ereignis auf beliebige Elemente mit der Klasse .Klick mich, und protokollieren Sie dann eine Nachricht an der Konsole, die Text des angeklickten Elements würden Sie Folgendes tun:

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

Sie sollten in der Lage sein zu sehen, dass die hier eingebettete Aktion eine anonyme Funktion ist, die die diese Selector (bezieht sich auf das Objekt, mit dem sich jQuery gerade beschäftigt) - in diesem Fall das Objekt, auf das geklickt wurde. Wir extrahieren dann den Text des angeklickten Objekts und protokollieren es in der Konsole. Einfach richtig?

Stoppen Sie die Standardaktion:

An einem bestimmten Punkt sollten Sie etwas an einen Link oder Formular senden, der normalerweise etwas anderes macht. In diesem Fall ist es sehr wahrscheinlich, dass Sie nicht möchten, dass die ursprüngliche Aktion ausgeführt wird. Stattdessen möchten Sie ein paar ausgefallene AJAX- oder spezielle jQuery-Magie ausführen.

Um zu verhindern, dass diese Standardaktion ausgeführt wird, haben wir eine praktische Methode namens "reflectDefault". Offensichtlich. Mal sehen, wie das funktionieren würde, wenn es sich um eine Schaltfläche zum Senden eines Formulars handelt

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

Ein paar Änderungen hier - erstens hängen wir an der einreichen Ereignis statt Klick. Dies ist angemessener, wenn Sie mit einem Formular arbeiten, wie es der Benutzer tun könnte Tabulatorraum, schlagen eingeben, oder schlagen Sie ein einreichen button - all das würde die Standardaktion des Formulars auslösen. Wir übergeben die Ereignisvariable auch an die anonyme Funktion, sodass wir auf die Ereignisdaten. Wir haben dann die verwendet event.preventDefault () in Kombination mit falsch zurückgeben um zu verhindern, dass alle üblichen Aktionen abgeschlossen werden.

In diesem Fall wird das Ereignis nur auf der Konsole protokolliert. In Wirklichkeit haben 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 zum Abhören eines Ereignisses verwendet. Sie können ein Ereignis jedoch auch manuell auslösen, indem Sie es stattdessen als Methode aufrufen. Es ist schwer zu verstehen, warum Sie dies verwenden könnten, um ein zu erzwingen “klicken”, macht aber mehr Sinn, wenn wir uns das Fokusereignis anschauen.

Der Fokus wird normalerweise bei Eingabefeldern verwendet, um eine Nachricht auszulösen, wenn der Benutzer in das Feld klickt, um Text einzugeben - beispielsweise eine Anweisungsnachricht über das zu verwendende Format. Sie können es jedoch auch verwenden, um den Benutzer nach dem Laden der Seite in das Feld für den Benutzernamen zu zwingen - damit er sofort mit der Eingabe der Anmeldedaten beginnen kann.

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

Wenn Sie an dieses Benutzername-Feld auch einen Fokusereignislistener angehängt haben, wird es auch ausgelöst, wenn Sie den Fokus erzwingen. Ereignisse können daher sowohl ausgelöst als auch abgehört werden.

Üben Sie zunächst, indem Sie verschiedene Ereignisse auf der Seite anhängen. Sie finden eine vollständige Liste aller hier verfügbaren Ereignisse. Vergessen Sie nicht, die Verwendung von disableDefault zu verwenden, wenn es sich um einen Link oder eine Schaltfläche handelt, und sehen Sie, welche Ausgaben Sie von der Konsole über Ereignisdaten erhalten.

Ich werde es heute dort belassen, wenn wir uns dem Ende dieser Mini-Serie von jQuery-Tutorials nähern. Am Ende sollten Sie zuversichtlich genug sein, etwas jQuery auf Ihre Seite zu werfen und etwas dazu zu bringen. Nächste Woche schauen wir uns AJAX an - einen wichtigen Teil des modernen Webs, mit dem Sie Anfragen im Hintergrund laden und senden können, ohne den Benutzer zu unterbrechen.

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

Bildgutschrift: Touchscreen über Shutterstock

Erfahren Sie mehr über: JavaScript, jQuery, Programmierung, Webentwicklung.