Events (Ereignisse)

Begriffe:

• Event ist das Ereignis das auftritt.
• Event Target ist das DOM Objekt, für welches ein Event behandelt werden soll.
• Event Handler ist die Funktion, die beim Auftreten des Events am Event Target ausgeführt werden soll.
• Event Listener wird beim Event Target angelegt, um beim Auftreten des Events den Handler aufrufen zu können.

Beispiel:

❮❯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;
}

Event registrieren

• eventTarget kann z. B. window, document, DOMElement sein
• mehrere Listener (auch gleicher Typ aber unterschiedlicher Handler) fürs gleiche eventTarget möglich
• Hinweis: inline event handler nicht verwenden (<div onclick="handlerFunction Code"/>, bzw. eventTarget.onclick), da weder mehrere Handler, noch remove möglich

Arten von Events

Es gibt verschiedene Events (Event und Kindklassen von Event), die ausgelöst werden können, z. B.

• Event (load, scroll, input, submit)
• MouseEvent (click, mouseover); KeyboardEvent (keydown)
• UIEvent (resize)
• FokusEvent (focus, blur)
• weitere: DeviceMotionEvent, ErrorEvent, ...

Liste von Events w3schools; Arten von Events w3schools (gebräuchlichste)

Liste von Events MDN; Arten von Events MDN

Event Informationen

Beim Aufruf der Handler Funktion wird ein Event Objekt übergeben, mit Informationen über das Event, z. B.

Event Objekt