emailconfirmed, nsInternRO, nsInternRW, Administrators
3,356
edits
m (Einrückung) |
(Einrückung und document.querySelector) |
||
Line 93: | Line 93: | ||
Mit "Event-Handlern" kann man auf Ereignisse und Benutzeraktionen reagieren. | Mit "Event-Handlern" kann man auf Ereignisse und Benutzeraktionen reagieren. | ||
Die Einfachste Möglichkeit ist den Event-Handler direkt ins HTML einzubinden: | Die Einfachste Möglichkeit ist den Event-Handler direkt ins HTML einzubinden: | ||
'''HTML und JavaScript:''' | |||
<source lang="HTML4Strict"> | <source lang="HTML4Strict"> | ||
<p><a href="#" onclick="alert('Hallo Welt!');">Rufe JavaScript auf</a></p> | <p><a href="#" onclick="alert('Hallo Welt!');">Rufe JavaScript auf</a></p> | ||
Line 98: | Line 100: | ||
Der Event-Handler im Beispiel ist <tt>onclick="..."</tt> | Der Event-Handler im Beispiel ist <tt>onclick="..."</tt> | ||
Besser ist es aber, HTML und Javascript zu trennen, und die Event-Handler im Javscript hinzuzufügen. Dazu holt man sich das Dom-Element, und gibt diesem einen | Besser ist es aber, HTML und Javascript zu trennen, und die Event-Handler im Javscript hinzuzufügen. Dazu holt man sich das Dom-Element, und gibt diesem einen Händler: | ||
'''In HTML:''' | |||
<source lang="HTML5"> | |||
<p id="changeMe">Rufe JavaScript auf</p> | |||
</source> | |||
'''In JavaScript:''' | |||
<source lang="JavaScript"> | <source lang="JavaScript"> | ||
function changeElement(e){ | function changeElement(e){ | ||
e.target.style.color="red"; | e.target.style.color="red"; | ||
} | } | ||
var domElement = document.getElementById("changeMe"); | // bisherige Variante: | ||
//var domElement = document.getElementById("changeMe"); | |||
// besser (moderner und schneller, aber nicht in allen älteren Browsern implementiert) | |||
var domElement = document.querySelector("#changeMe"); | |||
domElement.onclick= changeElement; | domElement.onclick= changeElement; | ||
</source> | </source> | ||
document.querySelector benutzt [[CSS]] Syntax, in diesem Beispiel steht die Raute # bei #changeMe für eine ID (id="changeMe"). | |||
Es gibt nur drei Selektortypen in CSS: | |||
* HTML-Selectoren (p, div, a usw...) <sup>vordefiniert</sup> | |||
* Klassen (.myStyle, .warning usw...) <sup>freie Benennung</sup> | |||
* IDs (#header, #content, #clickButton, usw...) <sup>freie Benennung</sup> | |||
Es ist wirklich hilfreich, sich in [[CSS]] einzulesen, um damit gut umgehen zu können. Der Vorteil von .querySelector gegenüber .getElementByID ist, dass es bedeutend schneller ist, da nicht das ganze DOM durchsucht werden muss und dass es sehr viel bequemer zu schreiben ist. Außerdem unterstützt .querySelector auch Pseudo-Selektoren und Regular Expressions. .querySelector macht auch den Einsatz von jQuery in 50% aller Fälle überflüssig, da jQuery häufig nur wegen der einfach zu notierenden Syntax <tt>$('#changeMe')</tt> genutzt wird. Das Gleiche erreicht man mit nativem JavaScript mit <tt>document.querySelector('#changeMe')</tt> | |||
=== onClick vs. addEventListener === | |||
Das Problem mit .onclick (und allen anderen "on..."-Event-Handlern) ist, dass jedes Element nur einen .onclick-Handler haben kann. Besser ist es .addEventListener("click", changeElement, false) zu verwenden, damit können nämlich beliebig viele Event-Callbacks (Funktionen) registriert werden: | |||
<source lang="JavaScript"> | <source lang="JavaScript"> | ||
domElement.addEventListener("click", changeElement, false) | domElement.addEventListener("click", changeElement, false) | ||
Line 117: | Line 139: | ||
===Handler wieder löschen bzw. un-registrieren=== | ===Handler wieder löschen bzw. un-registrieren=== | ||
Eventhandler kann man in der .on...-syntax durch überschreiben wieder loswerden. Dabei wird nicht die Funktion gelöscht, sondern die "Verbindung" zwischen Event und Funktion. | Eventhandler kann man in der .on...-syntax durch überschreiben wieder loswerden. Dabei wird nicht die Funktion gelöscht, sondern die "Verbindung" zwischen Event und Funktion. Dieses Verhalten ist nicht immer erwünscht und löst manchmal auch wichtige bestehende Verbindungen (z.B. in einer verwendeten JavaScript-Library), daher sollte prinzipiell die addEventListener Methode verwendet werden. | ||
<source lang="JavaScript"> | <source lang="JavaScript"> |