JavaScript Grundkurs

Ereignisse und Reaktion

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Ein Ereignis kann alles sein, was während der Lebenszeit einer Webseite auftreten kann. Mittels unterschiedlicher Eventhandler reagiert man auf unterschiedliche Ereignisse. Eventhandler sind das Bindeglied zwischen (X)HTML und JavaScript.
05:03

Transkript

Prinzipiell können wir JavaScripte und eigene Funktionen sowie vorgefertigte Funktionen beim Laden einer Webseite aufrufen, aber wir haben auch schon gesehen, wie man das mit Funktionsreferenzen an sogenannte Eventhandler koppelt. Diese gehören zu JavaScipt bzw. DOM und werden in einem umfangreichen Thema behandelt. Es gibt aber theoretisch auch die Möglichkeit, HTML-Eventhandler zu nehmen. Theoretisch insofern, als man das früher sehr viel gemacht hat, heutzutage aber eine Trennung von Struktur und Funktionalität erreichen möchte - und da sind die in gewisser Weise im Weg. Aber sie funktionieren immer noch und in diesem Film werde ich Ihnen diese vorstellen. Sie sehen hier beispielsweise einen HTML-Eventhandler onclick. Dieser wird ausgelöst, wenn ein Anwender auf den Button klickt. Es ist ein normales HTML-Attribut. Aber als Wert wird ein FunktionsAUFRUF notiert. Keine FunktionsREFERENZ, das ist ein echter FunktionsAUFRUF. Es wird diese Funktion hier aufgerufen, und der Übergabewert wird in irgendeiner Form weiterverarbeitet, was wir uns gleich noch ansehen werden. Dieser Klick auf den Button löst ein sogenanntes Ereignis aus. Unter einem Ereignis können Sie in unserem Zusammenhang alles verstehen, was während der Lebenszeit einer Webseite in einem Browser auftreten kann. Das kann das Laden der Webseite sein, das kann auch das Entfernen der Webseite sein. Das kann aber auch irgendeine Anwenderaktion sein. Und den Mechanismus zur Reaktion auf solche Ereignisse nennt man "Eventhandler". Eventhandler beginnen grundsätzlich mit "on". Dann folgt eine Beschreibung des Ereignisses, auf das sie reagieren. Sie sehen hier ein "onclick" und hier sehen Sie ein "onmouseover". Schauen wir uns dieses Beispiel erstmal an. So sieht die Webseite zuerst aus. Wenn ich mit dem Mauszeiger über den Teufel gehe, erscheint ein Text. Und wenn ich auf den Button klicke, erscheint hier ein anderer Text. Eben bin ich schon wieder über den Teufel gekommen. Also ist wieder dieser Text erschienen, der beim Überstreichen des Mauszeigers auftauchen soll. Jetzt kommt wieder der Text, der bei dem Klick auftauchen soll. Ich möchte nochmal drauf hinweisen, dass es zwei Varianten von Eventhandlern gibt: Eben die, die zu HTML gehören und die, die zu JavaScript gehören. Wir werden in diesem Training im Wesentlichen auf diejenigen setzen, die zu JavaScript gehören. Aber momentan kümmern wir uns um die, die zu HTML zu zählen sind. In jedem Fall sind Eventhandler ein Bindeglied zwischen der Webseite als statischer HTML-Struktur und der JavaScript-Funktionalität. Ein Tool wie Aptana hilft auch immens, denn wenn Sie hier anfangen zu schreiben, dann werden Sie sehen, dass, sobald Sie "on" schreiben, eine Liste mit erlaubten HTML-Eventhandlern auftaucht. Und wir könnten jetzt zum Beispiel "onmouseout" noch wählen. Das heißt, wir reagieren nicht nur darauf, wenn der Mauszeiger in den Bereich der Grafik kommt, sondern auch dann, wenn er die Grafik wieder verlässt. So würde sich das auswirken. Ich komme in den Bereich der Grafik, und der Text wird geschrieben. Ich gehe raus, und der Text wird wieder gelöscht. Wobei er eigentlich nicht gelöscht wird; er wird einfach durch einen Leerstring ersetzt. Das Wichtige sind aber die Eventhandler. Die meisten Eventhandler sind sprechend. "Onload" und "onunload" ist beim Laden und Entfernen von der Seite, teilweise auch von Objekten von der Seite, der passende Eventhandler. Eventhandler zu der Reaktion auf Mausaktionen sind "onclick", "onmouseover", "onmouseout". Man kann auch auf einen Doppelklick reagieren: "ondblclick". Man kann auch auf Maustasten reagieren: "onmousedown", "onmouseup". Das müssen Sie nicht alles im Detail wissen, da Sie ja auch von einem System wie Aptana Hilfestellung bekommen. Sie müssen es eigentlich nur lesen können. Auch Tastaturereignisse werden unterstützt: "onkeypress", "onkeydown", "onkeyup". Wobei man da überlegen muss, welches Element in der Website hat überhaupt einen Fokus. Ganz wichtig sind auch die ganzen Formularelemente und das Formular selbst; dass man zum Beispiel auf das Verschicken eines Formulars reagieren kann: onsubmit. Oder auf das Zurücksetzen eines Formulars: onreset. Grundsätzlich ist das ein sehr umfangreiches Thema, das wir im Rahmen von JavaScript-Eventhandlern und unseren konkreten Anwendungen, die im Laufe des Tutoriums noch folgen werden, intensiv nutzen werden. Dort lernen Sie diese einzelnen Eventhandler noch genauer kennen. In diesem Film haben Sie erstmal eine kurze Vorstellung von diesem ganzen Konzept, begrenzt auf den HTML-Eventhandler, gesehen.

JavaScript Grundkurs

Lernen Sie die Möglichkeiten der universellen Sprache JavaScript kennen und machen Sie sich mit der Syntax vertraut, um Ihre Web-Applikationen durch effektive Skripts zu ergänzen.

8 Std. 20 min (134 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!