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 lernen

Das Ereignisobjekt

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In dem Film sehen Sie, was das Ereignisobjekt ist und wie Sie es prinzipiell nutzen können. Sie erfahren auch, dass es inkompatible Ereignismodelle in verschiedenen Browsern gibt.
05:32

Transkript

In diesem Video wollen wir uns dem Event-Objekt von JavaScript oder genauer genommen dem Event-Objekt des DOM-Konzepts widmen. Wenn Sie hier Google Maps bspw. betrachten und Sie zoomen hier in eine Karte rein oder Sie verschieben diese Karte irgendwohin, dann muss diese Applikation wissen, wo sich der Mauszeiger befindet und ob Sie eine Taste gedrückt haben oder eben nicht. Diese Informationen, die per Ajax an den Server geschickt werden, müssen irgendwie ermittelt werden können und das geht über das sogenannte Event-Objekt. Sie sehen hier eine ganze einfache Webseite mit einem Bild und einem Dif, in dem ich gewisse Informationen ausgeben möchte. Ganz konkret soll das passieren: Ich bewege mich mit meinem Mauszeiger über dieses Bild und Sie sehen, dass es hier gewisse Informationen gibt, nämlich welche Bildschirmkoordinaten mein Mauszeiger gerade einnimmt. Diese Informationen werden über das Event-Objekt im DOM-Konzept zur Verfügung gestellt. Sie sehen hier, dass ich mit document.getElementById(B1) das Bild selektiere und ich hänge an den Event Handler on mousemove also auf die Bewegung eines Mauszeigers über das Bild möchte ich reagieren eine anonyme Funktion. Der entscheidende Punkt ist, dass diese anonyme Funktion einen Parameter hat, den ich EV genannt habe. Der Name ist Schall und Rauch. Sie können den Namen beliebig wählen, aber dieser Parameter ist per Grundeinstellung ein Synonym für das Event-Objekt. Mit den Eigenschaften pageX und pageY bekomme ich die X- und Y-Koordinaten des Mauszeigers relativ zum Fenster. Genau das kann ich also verwerten. Ich kann das im Bildschirm anzeigen, dem Anwender, oder ich kann diese Daten natürlich auch zum Server schicken. Soweit der einfache Teil. Das große Problem ist nun, dass es zwei konkurrierende Event-Objekt Modelle gibt. Es gibt einmal ein standarisiertes vom B3C und das benutze ich hier, d.h. dieses Event-Konzept sagt, dass das, was Sie als Parameter hier an diese anonyme Ereignisbehandlungsfunktion hängen, dass das das Synonym für das Event-Objekt ist. Es gibt eine Reihe mit standarisierten Eigenschaften pageX, pageY sehen Sie hier, screenX, screenY für die Bildschirmkoordinaten. Es gibt noch einige Weitere, die ich hier nicht aufführen möchte. Das kann man nachsehen, im Prinzip kein Problem. Wenn es nicht Microsoft gäbe! Microsoft hat niemals dieses standardisierte Event-Handling-Konzept in seine Browser implementiert bis zur Version 8 inklusive. Ab der Version 9 unterstützt der Internet Explorer dieses Event-Konzept auch. Sie sehen, dass diese Seite hier in Internet Explorer 9 funktioniert, zumindest solange dieser im Kompatibilitätsmodus betrieben wird und solange es immer noch Anwender gibt, die mit einem dieser alten Internet Explorer 8 oder gar 7, unter Umständen sogar 6 arbeiten, solange muss man zwei verschiedene Ereignismodelle aufbauen, Ereignisbehandlungen, um dieses Event-Objekt nutzen zu können. Denn wenn Sie diesen Browser hier im Kompatibilitätsmodus ansehen, oder eben einen alten Internet Explorer verwenden, dann passiert genau das hier. Es funktioniert nicht. Sie werden also, um eine Konstruktion dieser Art nicht umhinkommen. Tatsächlich benutze ich hier eine sogenannte Browserweiche. Das DOM-Objekt Navigator enthält Informationen über den Browser, mit dem ein Besucher eine Webseite lädt und dessen Eigenschaft "abnehmen" enthält bspw. für einen Internet Explorer immer die Zeichenkette "Microsoft". Mit einer String-Methode namens "search" suche ich diese Zeichenkette und wenn diese Zeichenkette gefunden wird, wird die Position angegeben in diesem Text, wo diese beginnt. Wenn sie nicht gefunden wird, wird der Wert -1 zurückgeliefert, d.h. sobald ich in dieser Zeichenkette, der Kennung eines Browsers Microsoft entdecke, kann man davon ausgehen, dass es sich um einen Internet Explorer handelt und dann mache ich eine Ereignisbehandlung, die speziell für den Internet Explorer gedacht ist. Ansonsten nehme ich die Standardereignisbehandlung. Microsoft sagt in seinen alten Event-Modellen nämlich, dass es in jeder Ereignisfunktion, die an einen Event-Handler gekoppelt wird, einen Standard Token namens Event gibt. Dieser repräsentiert automatisch das Ereignisobjekt. Dummerweise sind aber die Namen der Eigenschaften nicht identisch zu denen, die das Standard-Event-Objekt bereitstellt. X und Y entsprechen im Wesentlichen pageX und pageY, aber screenX und screenY gibt es nicht so in dieser Art. Dafür gibt es andere Eigenschaften: clientX oder offsetX. Grundsätzlich als kann man dieses Event-Objekt verwerten in JavaScript, wie Sie in diesem Video gesehen haben, aber, wenn Sie wirklich noch alte Internet Explorer unterstützen wollen, dann haben Sie einen gewissen Aufwand zu treiben.

JavaScript lernen

Legen Sie los mit der Programmierung von beeindruckenden Webseiten und machen Sie sich mit den Grundstrukturen von JavaScript, Objekten und insbesondere dem DOM-Konzept vertraut.

3 Std. 6 min (36 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

DVD oder Online-Training: Was ist der Unterschied?

 

Inhaltlich sind beide Trainings absolut gleich. Der Unterschied liegt bei den Nutzungsmöglichkeiten und im Vertriebsweg.

 

Beim Training auf DVD erhalten Sie eine Box mit allen Inhalten und einem gedruckten Bonusmagazin.

Die Bezahlung erfolgt bequem per Rechnung.

 

Das Online-Training ist sofort nach dem Kauf verfügbar, jederzeit und an jedem Ort. Sie brauchen nur eine Online-Verbindung und einen gängigen Webbrowser. Wenn Sie das Training herunterladen, steht es Ihnen auf Ihrem Computer auch offline zur Verfügung.

Die Bezahlung erfolgt per Kreditkarte, Paypal oder sofortüberweisung.de (nicht in allen Ländern verfügbar).

 

Wir wünschen Ihnen viel Freude mit dem Video-Training Ihrer Wahl – ob Online oder auf DVD.

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!