Ereignisobjekt
Es gibt ein Ereignisobjekt, mit Eigenschaften und Methoden, über welches man viele Informationen abfragen kann, was gerade passiert ist. Zum Beispiel bei einem Klick auf ein Bild lässt sich die Position des Mauszeigers auf dem Bild ermitteln. Was für eine Art von Ereignis es war. Oder welche Taste gedrückt wurde. Ob zusätzlich Strg, Shift oder Alt gedrückt wurde, etc.
<script>
function init(){
document.getElementsByTagName("img")[0].onclick = function(evt){
for(i in evt){
document.getElementById("infobox").innerHTML +=
"Eigenschaft: "+i+" Wert: "+ evt[i] + "<br>"
}
}
document.getElementById("delBtn").onclick = function(){
document.getElementById("infobox").innerHTML = "";
}
}
window.onload = init;
</script>
Klicke mal auf das Bild.
event Parameter
Man beachte den Parameter evt in der Event Funktion.
Der erste Parameter einer Event-Funktion ist immer das Eventobjekt mit seinen Eigenschaften. Der Bezeichner ist frei wählbar. function(evt), function(e), function(pillepalle)
Darüber lassen sich die Eigenschaften des Events in einer for-Schleife aufrufen. evt[i]
Man könnte die Eigenschaften auch über Punktsyntax aufrufen evt.ctrlKey
Diese ctrlKey- Eigenschaft liefert
true wenn die Strg Taste gleichzeitig gedrückt wurde.
Was es für Eigenschaften gibt, hängt von der Art des Events ab. Ein Maus-Ereignis hat andere Eigenschaften als ein Loader-Ereignis.
document.getElementsByTagName("img")[0].onclick = function(evt){
if(evt.ctrlKey){
console.log("Strg Taste wurde gedrückt");
}
}
event.currentTarget
Eine Eigenschaft der Mouse-Events ist currentTarget. Damit kann man abfragen, welchem Element der EventListener zugewiesen wurde.
let bild1 = document.getElementById("bild1");
let bild2 = document.getElementById("bild2");
let bild3 = document.getElementById("bild3");
bild1.addEventListener("click", showMe);
bild2.addEventListener("click", showMe);
bild3.addEventListener("click", showMe);
function showMe(evt){
evt.currentTarget.style.backgroundColor = "#CBC495";
}
event.target
Über die target Eigenschaft erhält man Zugriff auf das angeklickte Element. Hier wurde der Eventlistener auf das Elternelement der Bilder gesetzt. Klickt man auf die einzelnen Bilder, wird deren Hintergrund geändert.
let bildbox = document.getElementById("bildbox");
bildbox.addEventListener("click", showMe);
function showMe(evt){
evt.target.style.backgroundColor = "#CBC495";
}
