Nachgereicht - das verbesserte addToggleEvent
Im obigen Scripting zum Resultat wurde
addToggleEvent im Vergleich zu den vorhergehenden Ausführungen stark verändert. Was dort veranstaltet wurde ähnelt dem Ziel, das wir schon für
window.onload verfolgt haben: wie in
addOnLoadEvent wurde hier allgemeingültig das mit
sEvent bezeichnete Ereignis um eine weitere Funktion ergänzt, statt es einfach zu überschreiben. Die relativ aufwendige
if Struktur dient - wie immer - der Befriedigung verschiedener Browser-Herangehensweisen an die Problemstellung;
addEventListener bildet hier die von DOM Level 2 angebotene Zugriffsmethode, während der IE mittels
attachEvent arbeitet.
Die ganze Funktion entstand dann quasi aus einer Kombination aus der Funktionskapselung der
addOnLoadEvent Methode und einem von Ulrike Häßler vorgestellten Scriptfragment 'javascript
: Event Listener'
[4].
Schritt 6: Eventzuweisung aufgebohrt
Wenn man das eingangs beschrieben Modulkonzept für JS verwirklichen möchte, lässt sich schnell erkennen, dass die in
addToggleEvent implementierte Verfahrensweise doch ruck zuck zu einem großen Overhead führt. Deshalb wollen wir hier noch einmal die Schere ansetzen und uns eine allgemeingültige Methode zum Erweitern der Eventeigenschaften eines Objektes schaffen.
Hier können wir uns fast auf copy and paste beschränken: Unsere Funktion benötigt drei Parameter, eine Referenz auf das Objekt, den Bezeichner des einzurichtenden Events und die dabei auszuführende Funktion.
Code:
addEvent = function (oElement , sEvent , oFunction)
{
if (oElement.addEventListener)
{
oElement.addEventListener (sEvent.toLowerCase() , function ()
{
oFunction ();
} , false);
return (true);
}
else
if (oElement.attachEvent)
{
var mReturn = oElement.attachEvent('on' + sEvent.toLowerCase() , function ()
{
oFunction ();
});
return (mReturn);
}
else
{
return (false);
}
}
Die Funktion wird wieder als Parameter
oFunction übergeben, dem vorher eine komplette Funktionsdefinition zugewiesen wurde. Diese Methodik haben wir weiter oben bei
addOnLoadEvent (addToggleEvents); bereits gesehen.
Eine Zuweisungsoperation sparen wir uns beim Aufruf, vielmehr schreiben wir gleich die gesamte Funktion als Parameter in
addEvent's Parameterkette. Beispielhaft für
addToggleEvent:
Code:
addToggleEvent = function (oElement , sTargetIdentifier)
{
var sTargetIdentifier = sTargetIdentifier || sTgg_DefaultTargetIdentifier;
var sEvent = sTgg_DefaultEvent;
var sTarget = oElement.getAttribute (sTargetIdentifier , false);
oElement.removeAttribute (sTargetIdentifier , false);
addEvent (oElement , sEvent , function ()
{
toggleDivArea (sTarget);
});
}
Schritt 7: 'Terminschwierigkeiten' - das Problem mit dem Event
Bis jetzt klappt alles wunderbar. An die Grenzen stoßen wir, wenn wir das aktuell aufgetretene Eventobjekt auswerten möchten. Das wird dann notwendig, wenn wir auf bestimmte Tastaturereignisse reagieren wollen oder Mousekoordinaten ermitteln. Das Eventobjekt wird von JS wie von Zauberhand automatisch als Funktionsparameter übergeben. Das wirkt auf mich bis heute auch noch recht befremdlich. So kann ich ein per
Code:
oElement.onmousedown = trackMouse;
zugewiesenes Eventereignis bei Auftreten in der
trackMouse Funktion auswerten, indem ich in der Funktionsdefinition einfach den Parameter bereitstelle:
Code:
trackMouse = function (oEvent)
{
// non IE only
alert (oEvent.layerX);
}
Defacto weiß ich bis dato nicht, wie ich
oElement.onmousedown = ... hierbei z.B. einen eigenen Parameter mitgeben sollte.
Glücklicherweise haben wir uns ja ohnehin für die oben beschriebene Auslagerung der Eventzuweisung entschieden und können dieses Problem so lösen:
Code:
addEvent (oElement , 'mousedown' , function (oEvent) { trackMouse (oEvent , 'my Parameter'); });
Auch innerhalb von
addEvent müssen wir das Eventobjekt durchschleifen (man beachte die neu hinzugekommenen
oEvent Parameter):
Code:
addEvent = function (oElement , sEvent , oFunction)
{
if (oElement.addEventListener)
{
oElement.addEventListener (sEvent.toLowerCase() , function (oEvent)
{
oFunction (oEvent);
} , false);
return (true);
}
else
if (oElement.attachEvent)
{
var mReturn = oElement.attachEvent('on' + sEvent.toLowerCase() , function (oEvent)
{
oFunction (oEvent);
});
return (mReturn);
}
else
{
return (false);
}
}
Wer dieses Tutorial aufmerksam gelesen hat und meine Ausführungen nachvollziehen kann, der sollte auch das letzte Fragment anwenden und sich damit recht einfach z.B. ein
onmousemove Koordinatentracking zusammenbauen können.
Quellen
[4]
http://www.mediaevent.de/javascript/event_listener.html
.