Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

JavaScript Grundkurs

Wie funktionieren JavaScript-Eventhandler?

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Sie erfahren hier die Unterschiede zwischen HTML- und JavaScript-Eventhandlern und welche Vorteile die Verlagerung in JavaScript mit sich bringt und wie man dabei vorgeht. Sie können damit die Ereignisbehandlung vollkommen vom statischen HTML lösen.
07:35

Transkript

Im Fokus der Filme dieses Abschnitt steht die Ereignisbehandlung. Ich möchte Ihnen zeigen auf was Se alles achten müssen und warum Sie die Ereignisehandlung am besten wirklich vollkommen JavaScript verlagern. Ereignisbehandlung ist etwa so etwas, das heißt der Anwender tut irgendetwas und Sie wollen gezielt darauf reagieren, indem Sie eine Funktion aufrufen. Nun kennen Sie so etwas aus HTML heraus. Es gibt diese HTML Eventhandler, die man einfach als Attribute an einem Tag schreibt, bei dem man eine gewisse Reaktion haben möchte. Hier sehen Sie beispielsweise onmouseover ruft diese Funktion anzeigen auf und die macht nicht mehr, als dass sie einen Text über innerHTML in einem Div schreibt und bei onmouseout spricht der Mauspfeil bewegt sich im Bereich, rufen Sie die Funktion leeren auf und die leert diesen Bereich wieder. Nun hat dieses Verfahren, aber mehrere Probleme. Das gravierendeste Problem ist, dass Sie eine Trennung von Funktionalität und Struktur nicht erreichen Das hier ist eine Funktionalität und nicht eine Strukturinformation. Und bei modernen Seiten muss man unbedingt eine komplette Trennung von Strukturlayout und Funktionalität erreichen und das ist hier nicht gewährleistet. Des weitern, es gibt zwar für die meisten Ereignisse, die im Rahmen einer Website auftreten können HTML Eventhandler, aber nicht für alle und in gewissen Situationen werden Sie sowieso gezwungen in die JavaScript Welt zu wechseln, insbesondere haben Sie in der HTML Welt das Eventobjekt nicht so richtig unter Kontrolle. In JavaScript haben Sie dieses Eventobjekt und damit können Sie eine ganze Menge anstellen, wenn Sie die gleichwertige Funktionalität hier mit Javascript erreichen wollen, machen Sie folgendes; Sie selektieren das Element für das eine Reaktion erfolgen soll über die klassische Vorgehensweise, wie hier, also document. getElementsByTagName als Beispiel. Sie können jedere form der Selektion nehmen, die Sie kennen und ich selektiere jetzt mal das zweite Bild in der Website und dann können Sie mit einem Punkt abgetrennt Eventhandler hinschreiben. Jeder HTML Eventhandler den Sie bei einem Text setzen können , den können Sie auch so als Eigenschaft das Objekt ist ansprechen, nur eine Eigenschaft weißt man einen Wert zu, keinen Funktionsaufruf, einen Wert und dort kommt eine sogenannte Funktionreferenz, eine anonyme Funktion oder allgemein eine Callbackfunktion zum Einsatz. Betrachten wir die Funktionsreferenz, dass wäre ein Gleichheitszeichen und dann der Name der Funktion, auf keinen Fall mit Klammern. Das ist ein Zeiger, ein Wert, auf die Funktion und vollkommen analog würden Sie auch das onmouseout spezifizieren, auch wenn es im Moment noch nicht ganz klar werden sollte, der Sprung von einem HTML Eventhandler beim JavaScript Eventhandler, ist quasi, wenn Sie von einem Dreirad in ein Formel 1 Wagen umsteigen. Es ist eine solche Qualitätsverbesserung, man kann sie überhaupt nicht hoch genug bewerten. Ich bitte Sie einfach mir erstmal zu glauben, selbst wenn Sie noch nicht wissen. Jetzt haben wir natürlich noch ein Problem, wenn ich das hier an dieser Stelle mache , diese Referenz auf ein Element mit document getElementsByTagNameIMG von 1, versuche ich ein Element anzusprechen, dass es noch nicht gibt, weil der Browser hier diese Zeilen überhaupt nicht erreicht hat. Ich muss das nach unten verlagern. Ich werde das mal mit einer quick and dirty Lösung machen, das heißt ich nehme diese Refrenzierung da weg und schreibe Sie in einen zweiten Scriptsontainer unterhalb hin, Ich zeige Ihnen gleich eine viel bessere Lösung, wie man das professioneller macht, aber momentan ist das die Lösung, um jetzt bei JavaScript Ereignisse zu verwerten. Schauen wir uns das mal an, ob das funktioniert. Das hier ist die Html-Variante und das hier die JavaScript Variante. Ich zeige den gleichen Text dran, aber es funktioniert und darum geht es nur. Die eingentlichen Vorteile dieser Ereignessbehandlung und der JavaScript ergeben sich, das man einmal das Eventobjekt zu Verfügung hat, was wir hier noch nicht verfolgen, aber vor allen Dingen auch, dass ich jetzt eben eine Trennung erreichen kann und die kann ich erst dann erreichen, wenn ich auch eine externe JavaScript Datei hinzuziehe, das heißt ich binde hier mal eine externe JavaScript Datei ein und verlagere dann meine gesamte Ereignisbehandlung und auch die Deklaration der Funktionen in diese externe JavaScript Datei, das heißt das, was hier steht, kommt in diese externe JavaScript Datei rein und damit kann dieser Scriptsontainer weg. Das, was hier steht, aber auch. Jetzt muss ich wieder aufpassen, wo ich diese JavaScript-Dateien eingebunden habe. Zu weit oben, da habe ich ein Problem, also von daher würde ich hier noch eine Funktion bauen, die nenne ich mal init und ich baue es da rein und damit kann ich auch hier diesen Scriptcontainer vollkommen wegnehmen. Ich habe nur noch die externe Referenz. Nun muss ich diese Initialisierungsfunktion noch aufrufen, das kann ich natürlich Machen; Body.onload =init, nur das wäre ungefähr so, als würden wir auf einen hohen Berg steigen und 5 Meter vom Gipfel abbiegen. Das sollten Sie jetzt auch in Javascript verlagern. Das können Sie Machen. Das heißt Sie würden auch in die externe Datei einen Aufruf reinschreiben window.onload = init. Sie sehen also man versucht alles in Funktionen zu Kapseln und über eine zentrale Initialisierungsfunktion, in der sie auch andere Dinge zum Initialisieren der Seite reinschreiben können, in so eine Funktion auch die Ereignisbehandlung zu implementieren, insofern dass Sie hier Referenzen auf die entsprechenden Funktionen für jedes gewünschte Element hinschreiben . und diese Initialisierungsfunktion am Ende des Ladens der Webseite aufrufen In der vergangenheit gab es mit onload gewisse Schwierigkeiten bei einigen Browsern,aber in modernen Browsern funktioniert das und für so eine Art der Programmierung braucht man auch relativ moderne Browser, was vielleicht noch ein Argument für die HTML Eventhandler sein könnte, aber diese Browser, diese alten, die kommen mit diversen anderen Techniken nicht mehr zurecht. Meines erachtens sollte man die nicht mehr weiter berücksichtigen. Es sollte also nun klar sein, was eine Ereignisbehandlung unter JavaScript bedeutet und wo die entsprechenden Vorteile liegen.

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!