DOM-Manipulation JavaScript - Der Internet Explorer - Event-Handler

1. Die Abschnitte

• Einführung
• Namensvergabe
• CSS-Anweisungen
• Formulare
• Event-Handler

2. Ach ja, Microsoft ...

Wer denkt, er kennt diesen Browser mit all seinen Macken, wird hier möglicherweise (mal wieder) eine Überraschung erleben. Also, als die Programmierer von Microsoft am Internet Explorer 6 herumwerkelten, waren sie wohl der Meinung, dass Event-Handler nicht zum DOM gehören. Also haben sie es weggelassen. Und beim Nachfolger vergessen, einzubauen. Und das stellt uns mal wieder vor große Probleme.

3. Einen Event-Handler entfernen

function delClick()
{
  var link = document.getElementById('linki');
  link.removeAttribute ('onclick');
}   
...
<p>
  <a href="#" onclick="alert('hallo');" id ="linki">Klick mich</a>
</p>
<p>
  <a href="#" onclick="delClick();" id ="linki">Der Event-Handler soll weg</a>
</p>

Mit der Funktion delClick wollen wir den Event-Handler im Link mit der ID linki entfernen. Klappt im Firefox und Safari wunderbar, aber im IE 6/7 tut sich gar nichts. Die Schlauen unter euch werden sich jetzt an das Beispiel mit den CSS-Klassen erinnern und ein

var clicki = link.getAttributeNode('onclick')
link.removeAttributeNode(clicki);

ausprobieren. Aber auch führt nicht zum erwünschten Erfolg. Die einzige Möglichkeit besteht wohl darin, das onclick-Attribut mit einem leeren Wert zu überschreiben, also

function delClick()
{
  var link = document.getElementById('linki');
  link.setAttribute ('onclick','');
}   

4. Einen Event-Handler erzeugen

Hier haben wir dasselbe Problem. Der übliche Weg funktioniert im Firefox, Safari und auch im Opera. Dabei klappt sowohl die Standardvariante setAttribute

function setClick()
{
  var link = document.getElementById('linki');
  link.setAttribute('onclick','alert ("Hallo, da bin ich wieder")');
}  
...
<p>
  <a href="#" onclick="alert('hallo');" id ="linki">Klick mich</a>
</p>
...
<p>
  <a href="#" onclick="setClick();" id ="linki">Der Event-Handler wieder da sein</a>
</p>

als auch die Alternativmöglichkeit über createAttribute und setAttributeNode.

var clicki = document.createAttribute('onclick');
clicki.nodeValue = 'alert ("Hallo, da bin ich wieder")';
link.setAttributeNode (clicki);

Die Lösung

... läuft doch tatsächlich in allen vier Browsern, egal in welcher Version. Dabei verpasst man dem Link direkt einen Event-Handler. Und darum sollte man meiner Meinung nach immer auf diese Variante zurückgreifen.

function setClick()
{
  var link = document.getElementById('linki');
  link.onclick = function()
  {
    alert ('Hallo, da bin ich wieder');
  }
}