Eventhandler im JavaScript mit dem HTML Dokument verknüpfen
17. April 2009 Roland
- Programmierung
- Variablenzuweisungen und Berechnungen
- Alter berechnen nur mit JavaScript
- Alter berechnen mit und ohne Javascript
- Code Optimierung
- Client Server Applikationsarchitektur
- Eigenschaften eines Webbrowsers
- Stylesheets
- Interaktive Webclients
- Mit HTML, oder SVG, interaktive Ein- Ausgaben erstellen
- Mit JavaScript aus einem Dokument Daten lesen
- Der Webserver
- Webserver-seitige Programmierung
- Datenbankanbindung
- Architekturprinzip Separation of Concerns
- Beschreibung von Anwendungsfällen
- Mit JavaScript einen wiederkehrenden Event erzeugen
- Kommunikationswege bei Einsatz von Java auf dem Webclient
- Einbinden der JavaScript Timer Klasse in eine Webseite
- AJAX Kommunikation ohne Fassaden Pattern
- JavaScript Klassen mit Object-Literal Syntax erstellen
- Knackpunkte bei der Klasse AsyncCommunication
- Speicherverbrauch in AJAX Applikationen
- Auch bei JavaScript immer die Variablen sauber deklarieren
- Eventhandler im JavaScript mit dem HTML Dokument verknüpfen
- Objekte in JavaScript mit JSON deklarieren
Als ich mit JavaScript angefangen habe, wäre ich beinahe an der Variablengültigkeit verzweifelt.
Folgende Problemstellungen wollte ich lösen:
Im Source-HTML kein JavaScript
Ich wollte, dass meine JavaScript Befehle im HTML nicht eingetragen werden müssen.
Das bedeutet, dass keine onblur, onkeypressed oder sonst was für Attribute in den HTML Elementen hart reingeschrieben werden sollten.
Also las ich die Grundlagenbücher und Grundlagenbeschreibungen im Internet und erkannte, dass ich beim Laden der HTML-Seiten meine JavaScript Trigger ins HTML Dokument einschreiben kann.
Meine lieben Webdesigner bekommen ihr geliebtes HTML und müssen sich dann nur noch an unsere Namenskonventionen für IDs halten.
Beide Personengruppen (Hacker und Designer) sind voneinander getrennt und glücklich.
Ich konnte meine Events also als nachträglich reinfummeln.
Beispiel:
-
* Erstellt im HTML-Dokument die nötigen Eventhandler und initialisiert den Controller dieser Webappliaktion.
-
*/
-
function onload(){
-
controller = new PrototypController(this.document);
-
}
-
-
/**
-
* Der Controller, der die Aktivitäten innerhalb unserer Webapplikation steuert.
-
* Im Konstruktor werden die Eingabefelder des HTML Dokuments mit den notwendigen onblur-Events ausgestattet.
-
*/
-
function PrototypController(document){
-
this.document = document;
-
var inputName = document.getElementById("name");
-
inputName.onblur = this.onBlurHandlerName;
-
// Beim Event wird das betroffene HTML-Element übergeben. Dieses HTML Element muss eine Referenz auf
-
// unseren Controller erhalten. Ans onsten können wir keine Verknüpfung zwischen der Oberfläche und dem Modell erreichen.
-
inputName.controller = this;
-
-
var inputFirstName = document.getElementById("firstname");
-
inputFirstName.onblur = this.onBlurHandlerFirstName;
-
inputFirstName.controller = this;
-
}
-
-
/**
-
* Implementation der benötigten EventHandler.
-
*/
-
PrototypController.prototype={
-
onBlurHandlerName:function(){
-
// Von der Referenz auf den Controller das Dokument und das Personenobjekt laden.
-
var document = this.controller.document;
-
var value = (this.value) ? this.value : "Kein Name";
-
message = document.getElementById("message_name");
-
message.innerHTML = value;
-
},
-
onBlurHandlerFirstName:function(){
-
var value = (this.value) ? this.value : "Kein Name";
-
var document = this.controller.document;
-
message = document.getElementById("message_firstname");
-
message.innerHTML = value;
-
}
-
}
Im HTML Dokument lade ich diese JavaScript Datei und rufe die onload() Funktion auf.
Diese Funktion erstellt mir ein Controller Objekt. Der Controller (PrototypController) füllt in die input-Felder name und firstname die onblur Attribute ein. Weiterhin wird dem jeweiligen Eingabefeld die Referenz auf den PrototypController mitgegeben.
Das ist sehr wichtig.
Wenn der onblur (also das Verlassen des Feldes Event) aufgerufen wird, wird eine der Methoden des PrototypController aufgerufen.
Zum Zeitpunkt des Aufrufes stehen wir jedoch im Input-Feld. Somit ist “this” auch das Input Feld.
Wenn wir nun auf andere Element im Dokument verweisen wollen, benötigen wir eine Referenz darauf.
Das habe ich mit dem Verweis auf den Controller erledigt. Dieser beinhaltet einen Link auf das Dokument und kann somit die message-Elemente liefern.
Mich hat das Stunden gekostet, bis ich endlich begriff wo mein Aufruf eigentlich herkommt.
Die onBlurHandlerXXX Methoden sind Callback Funktionen. Das bedeutet, dass beim Aufruf nicht aus dem window oder document oder sonst wo her aufgerufen wird, sondern aus dem jeweiligen Input Element.
Überlege dir bitte wirklich genau, von wo dein Aufruf in deinem JavaScript- HTML DOM Konstrukt erfolgt. Ansonsten hast du plötzlich “undefined” Objekte und keine Ahnung warum das so ist.
Artikel mit ähnlichen Schlagwörtern
Der Beitrag wurde am Freitag, den 17. April 2009 um 07:53 Uhr veröffentlicht und wurde unter Programmieren abgelegt.
Dir gefiel der Artikel? Dann abonniere doch den RSS Feed
Du kannst die Kommentare zu diesem Eintrag durch den RSS 2.0 Feed verfolgen. Du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.
