Event Beispiel

Ermöglicht Code, der nicht sofort ausgeführt werden soll, sondern erst, wenn ein bestimmtes Ereignis auftritt, z. B. ein Klick.

Beispiel:

❮❯HTML<div id="box" />

❮❯CSS#box {
  background-color: black;
  width: 100px;
  height: 50px;
}

❮❯JavaScriptlet box = document.getElementById('box');
box.addEventListener('click', changeBGColor);
function changeBGColor(event) {
  let randomColor = Math.floor(Math.random() * 0xffffff).toString(16);
  event.currentTarget.style.backgroundColor = '#' + randomColor;
}

Vorgehen:

• mit der Funktion addEventListener vermerken, auf welche Art von Event wie reagiert werden soll
• welche Art von Event: z. B. das "click" Event
• wie reagiert werden: z. B. mit der changeBGColor Methode
• wenn das Event Auftritt, wird die Methode aufgerufen
• Informationen zum Event werden an die Methode übergeben