Bureaucrats, emailconfirmed
1,221
edits
Line 106: | Line 106: | ||
domElement.onclick= changeElement; | domElement.onclick= changeElement; | ||
</source> | </source> | ||
statt .onclick kann auch .addEventListener("click", changeElement, false) benutzt werden, eine Form die mehr Kontrolle bietet: | statt .onclick kann auch .addEventListener("click", changeElement, false) benutzt werden, eine Form, die mehr Kontrolle bietet: | ||
<source lang="JavaScript"> | <source lang="JavaScript"> | ||
domElement.addEventListener("click", changeElement, false) | domElement.addEventListener("click", changeElement, false) | ||
</source> | |||
Mit addEventListener können einem Element auch mehrer Funktionen für das selbe Event zugeordnet werden: | |||
<source lang="JavaScript"> | |||
domElement.addEventListener("click", otherFunction, false) | |||
</source> | |||
Damit würden jetzt bei einem Klick die Funktionen changeElement und otherFunction aufgeführt werden. | |||
Eventhandler kann man in der .on...-syntax durch überschreiben löschen: | |||
<source lang="JavaScript"> | |||
domElement.onclick= undefined; | |||
</source> | |||
In der addEventListener-Syntax benutzt man removeEventListener mit den selben Argumenten, die im entsprechenden addEventListener genutzt wurden: | |||
<source lang="JavaScript"> | |||
domElement.removeEventListener("click", otherFunction, false) | |||
</source> | </source> | ||
Die Event-Handler-Funktion bekommt automatisch als erste Variable ein Event-Objekt übergeben. in der Funktion | Die Event-Handler-Funktion bekommt automatisch als erste Variable ein Event-Objekt übergeben. in der Funktion | ||
<source lang="JavaScript"> | |||
function changeElement(e){ | |||
e.target.style.color="red"; | |||
} | |||
</source> | |||
ist die Variable "e". Diese hat etliche Eigenschaften des Events, wie z.B. Position des Mausklicks und das Element auf dem das Event geschah – .target, wie oben genutzt. | |||