Events im DOM

💡

Dauer: ca. 15 Minuten

Themen:

element.addEventListener
click-Events

Ziel: Auf Ereignisse bzw. Events im DOM mit JavaScript reagieren

Einem HTML-Element kann ein sogenannter „event handler“ zugewiesen werden. Dabei handelt es sich in der Regel um eine Funktion (handler), die beim Eintreten eines bestimmten Ereignis (event) aufgerufen wird:

const addButton = document.querySelector('#add_btn');
const locationInput = document.querySelector('#location_input');
 
function addLocation() {
  // Eingabe des Ortsnamen aus Textinput-Element auslesen
  const locationName = locationInput.value
  // Funktion erstellt HTML-Element (siehe vorige Seite)
  createNewLocation(locationName);
}
 
// Eventhandler ist
addButton.addEventListener('click', addLocation)

Beim Event/Ereignis 'click', d.h. beim Klicken des Buttons, wird nun die Funktion addLocation aufgerufen, die somit als Eventhandler ausgeführt wird.

LiveCoding: Klick auf den Add-Button liest die Eingabe des Ortsnamen im Textinput und erstellt einen neuen Ort mit diesem Namen.

Verwendete Methoden:

element.value (auf den Wert einer Eingaben oder Auswahl im Formularelementen zugreifen)
element.addEventListener('click', function) (Mit einer Funktion das Verhalten beim Klicken eines Element definieren)

Methoden der DOM-API Struktur und Links