JQuery Tutorial (Teil 4)

Werbung

Heute werden wir noch einen drauflegen und wirklich zeigen, wo jQuery glänzt - Veranstaltungen. Wenn Sie den vorherigen Tutorials gefolgt sind, sollten Sie jetzt ein ziemlich gutes Verständnis für das haben grundlegende Codestruktur von jQuery jQuery Tutorial - Erste Schritte: Grundlagen und SelektorenLetzte Woche habe ich darüber gesprochen, wie wichtig jQuery für jeden modernen Webentwickler ist und warum es großartig ist. Diese Woche, denke ich, ist es Zeit, dass wir uns mit etwas Code die Hände schmutzig machen und lernen, wie ... Weiterlesen (und all die schrecklichen geschweiften Klammern, die dazu gehören), sowie wie man Elemente des DOM und findet Einige Dinge, die Sie tun können, um sie zu manipulieren Einführung in jQuery (Teil 2): ​​Methoden und FunktionenDies ist Teil einer fortlaufenden Einführung für Anfänger in die jQuery-Webprogrammierungsserie. Teil 1 befasste sich mit den jQuery-Grundlagen zum Einfügen in Ihr Projekt und den Selektoren. In Teil 2 fahren wir fort mit ... Weiterlesen

. Ich habe Ihnen auch gezeigt, wie Sie auf die zugreifen können Entwicklerkonsole in Chrome Finden Sie Website-Probleme mit Chrome Developer Tools oder Firebug herausWenn Sie bisher meinen jQuery-Tutorials gefolgt sind, sind möglicherweise bereits einige Codeprobleme aufgetreten, und Sie wissen nicht, wie Sie diese beheben können. Wenn man mit einem nicht funktionierenden Code konfrontiert wird, ist es sehr ... Weiterlesen und wie Sie es verwenden könnten, um Ihren jQuery-Code zu debuggen.

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

Was ist überhaupt ein Ereignis?

Für Programmierneulinge, die eine grafische Oberfläche verwenden, beziehen sich Ereignisse auf jede Art von Interaktion zwischen dem Benutzer und der Anwendung. oder kann intern durch einen 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 Ihren iPhone-Bildschirm tippen, wird ein einzelnes „Tippereignis“ mit einer x, y-Koordinate generiert, die genau auf die Stelle tippt, an der Sie getippt haben. Wenn Sie auf ein bestimmtes Objekt wie eine Schaltfläche getippt haben, hat die Schaltfläche wahrscheinlich auf dieses Ereignis gewartet und führt eine entsprechende Aktion aus. Wenn es nur ein leerer Teil der Benutzeroberfläche war, wurde nichts an das Ereignis angehängt, sodass nichts passiert.

Wenn Sie Ihren Finger über den Bildschirm ziehen, wird ein weiteres 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 vielleicht am einfachsten zu hörende Ereignis ist das Klickereignis, das ausgelöst wird, wenn ein Benutzer auf ein Element klickt. Dies muss keine bestimmte "Schaltfläche" sein - Sie können einen Ereignis-Listener an alles auf dem Bildschirm anhängen, aber als Webentwickler müssen Sie dies natürlich intuitiv gestalten. Erstellen eines Pseudo-Buttons aus dem Buchstaben ein versteckt in einem Absatz von Text ist möglich, aber etwas dumm.

Die Methoden zum Anhängen eines Ereignis-Listeners haben sich im Laufe der Jahre im Zuge der Entwicklung von jQuery erheblich geändert. Dies ist jedoch die derzeit akzeptierte Methode auf():

$(Wähler).auf(Veranstaltung,Aktion);

Auf ein „klicken”Ereignis für alle Elemente mit der Klasse .Klick mich, und protokollieren Sie dann eine Nachricht an der Konsole, die das enthält Text des angeklickten Elements würden Sie tun:

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

Sie sollten sehen können, dass die hier eingebettete Aktion eine anonyme Funktion ist, die die verwendet diese Selektor (der sich auf das Objekt bezieht, mit dem sich jQuery gerade befasst) - in diesem Fall das Objekt, auf das geklickt wurde. Anschließend extrahieren wir den Text des angeklickten Objekts und protokollieren ihn in der Konsole. Einfach richtig?

Beenden Sie die Standardaktion:

Irgendwann möchten Sie eine Verknüpfung zu einem Link oder einer Schaltfläche zum Senden von Formularen herstellen, die normalerweise etwas anderes bewirkt. In diesem Fall ist es sehr wahrscheinlich, dass Sie nicht möchten, dass diese ursprüngliche Aktion ausgeführt wird. Stattdessen möchten Sie ausgefallene AJAX- oder spezielle jQuery-Magie ausführen.

Um zu verhindern, dass diese Standardaktion ausgeführt wird, haben wir eine praktische Methode namens prepareDefault. Offensichtlich. Mal sehen, wie das funktionieren würde, wenn Sie mit einer Senden-Schaltfläche für ein Formular arbeiten

$ ("# myForm"). on ("submit", Funktion (Ereignis) { console.log (Ereignis); event.preventDefault (); falsch zurückgeben; });

Ein paar Änderungen hier - erstens hängen wir an der einreichen Ereignis statt Klick. Dies ist besser geeignet, wenn der Benutzer ein Formular bearbeitet Tabulator, schlagen eingebenoder drücken Sie eine einreichen Schaltfläche - All dies würde die Standardaktion des Formulars auslösen. Wir übergeben die Ereignisvariable auch an die anonyme Funktion, damit wir auf die verweisen können 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 in der Konsole protokolliert. In Wirklichkeit hätten Sie hier 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 abzuhören. 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 "Klicken" zu erzwingen, aber es ist sinnvoller, wenn wir uns das Fokusereignis ansehen.

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 zum zu verwendenden Format. Sie können es aber auch verwenden, um den Benutzer nach dem Laden der Seite in das Feld Benutzername zu zwingen, damit er sofort mit der Eingabe seiner Anmeldedaten beginnen kann.

$ (Dokument) .ready (Funktion () { $ ('# username'.focus (); });

Wenn Sie diesem Feld für den Benutzernamen auch einen Listener für Fokusereignisse angehängt haben, wird dieser 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 Ereignisse Veranstaltungen finden Sie hier - Denken Sie daran, PreventDefault zu verwenden, wenn es sich um einen Link oder eine Schaltfläche handelt, und sehen Sie, welche Ausgabe Sie über Ereignisdaten von der Konsole erhalten.

Ich werde es heute dort belassen, wenn wir uns dem Ende dieser Miniserie von jQuery-Tutorials nähern. Sie sollten am Ende sicher genug sein, etwas jQuery auf Ihre Seite zu werfen und sie dazu zu bringen, etwas zu tun. Nächste Woche werden wir uns mit AJAX befassen - einem wichtigen Teil des modernen Webs, mit dem Sie Anforderungen im Hintergrund laden und senden können, ohne den Benutzer zu unterbrechen.

Feedback, Fragen, Kommentare und Probleme sind nach wie vor willkommen.

Bildnachweis: Touchscreen über Shutterstock