DOM-Scripting - "Anonyme" Event-Handler
1. Begriffsverwirrung
Ja, ich gestehe. Es gibt keine anonymen Event-Handler. Darum hab ich das auch in Anführungszeichen geschrieben. Das hat aber seinen Grund und dazu komme ich gleich.
2. Event-Handler setzen
Dazu muss man erst mal das entsprechende HTML-Element ansteuern. Leider ist das Thema ein wenig komplexer und darum gehe ich auf die Details erst bei der DOM-Manipulation ein. Wir arbeiten hier der Einfachheit halber mit IDs.
<a href="#" id="blubb">Klick mich</a>
Um denn nun einen Event-Handler per DOM-Scripting auf den Link zu legen, geht man so vor.
document.getElementById('blubb').onclick = ...
3. Und jetzt ganz genau aufgepasst!
Hinter dem Gleichheitszeichen kann man direkt(!) nur eine Funktion ohne Parameter aufrufen. Mehr nicht. Und man darf auf gar keinen Fall mit den sonst üblichen Klammern hinter dem Funktionsaufruf arbeiten!
document.getElementById('blubb').onclick = machWas;
function machWas() {...}
Ein einfaches Beispiel dazu
document.getElementById('blubb').onclick = alert('hier');
Dieser Code wird sofort ausgeführt! Und wenn man dann auf den Link klickt, so passiert gar nichts! Das gilt übrigens auch für Funktionen. Probiert es ruhig mal aus.
4. So macht man es richtig
Um denn nun eine Methode oder Funktion aufzurufen, arbeitet man mit einer anonymen Funktion. Und der Begriff existiert tatsächlich. Die Schreibweise sieht übrigens so aus.
document.getElementById('blubb').onclick = function()
{
alert('hier');
}
// Oder so
document.getElementById('blubb').onclick = function()
{
var bla = 'Blubb';
machwas(bla);
}
Erläuterung
Vielleicht erkennt der eine oder andere von euch schon den Sinn des Begriffes "anonym". Also, mit dem function weist man
dem entsprechenden HTML-Element eine Funktion zu. Der Auslöser ist dann in diesem Fall das onclick. Und weil die
Funktion keinen "Namen" hat, nennt man sie anonym.
Wenn sich jetzt jemand fragt, warum ein document.getElementById('start').onclick = machwas() nicht einfacher und komfortabler
wäre, den verweise ich einfach an die Leute, die für diese Spezifikation zuständig sind.
5. Ein Hinweis
Bei den anonymen Funktionen muss man noch auf etliche Details achten, aber darauf gehe ich erst unter dem gleichnamigen Punkt beim Thema "OOP mit JavaScript" ein. Außerdem ist dieses Tutorial nur als erster Einstieg in die JavaScript-Programmierung für "fortgeschrittene" Anfänger gedacht.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt