DOM-Scripting - Überschreiben
1. Die große Merde
Wenn man zum Beispiel bei einer älteren Programmierung noch die Event-Handler direkt auf ein HTML-Element gelegt hat und dann auf die "moderne" Variante umsteigt, so kann das während der Umstellung im Live-Betrieb zu Problemen führen. Denn bei dieser Vorgehensweise werden alle bereits existierenden Handler im HTML-Tag direkt ins Nirwana befördert, sobald man auf besagtes Element einen gleichnamigen weiteren Event-Handler über das DOM-Scripting einhängt. Dazu gibt es ein paar einfach Regeln, die ich nun vorstelle.
2. Das Prinzip
<a href="#" id="blubb" onclick="alert('hier');">Blubber</a>
<script type="text/javascript">
document.getElementById('blubb').onclick = machWas;
function machWas()
{
document.location.href = 'http://www.peterkropff.de';
}
</script>
Erläuterung
Hier wird das onclick im <a>-Tag komplett in den Orkus befördert. Oder genauer gesagt, es wird durch
document.getElementById('start').onclick überschrieben. Das bezieht sich aber immer nur auf identische Events. Ein
onmouseover direkt im Link würde dagegen noch ausgeführt. Aber!
3. Vorsicht!
Achtet genau auf die Art der Event-Handler. Denn was wird wohl bei folgendem Beispiel zuerst ausgelöst?
<a href="#" id="blubb" onmousedown="gotoGoogle();">Blubber</a>
<script type="text/javascript">
document.getElementById('blubb').onclick = gotoPeter;
function gotoPeter()
{
document.location.href = 'http://www.peterkropff.de';
}
function gotoGoogle()
{
document.location.href = 'http://www.google.de';
}
</script>
Genauuuuu!
Die Funktion gotoGoogle wird ausgeführt. Warum? Ganz einfach, weil ein onmousedown vor einem onclick
ausgeführt wird. Denn das entspricht einem onmouseup.
4. Ein Tipp
Wer seinen alten Code auf das DOM-Scripting umstellen will, sollte das nicht peu à peu machen, sondern in einem Rutsch. Ansonsten bekommt ihr durch die oben beschriebenen Verhaltensweisen der Browser ziemliche Probleme.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt