JavaScript Fortgeschritten Tag 5: Erweiterte DOM & Event-Handling

Ziel des Tages

Heute lernst du:

• Wie man interaktive Web-Apps baut
• Event Delegation
• Umgang mit dynamischen Elementen
• Custom Events
• Effizientes Manipulieren von Klassen und Attributen

Am Ende kannst du komplexe UI-Interaktionen effektiv steuern.

Schritt 1: Event Delegation

Ein einzelner Event Listener am Eltern-Element:

document.querySelector("#parent").addEventListener("click", e => {
  if(e.target.tagName === "BUTTON") alert("Button geklickt!");
});

Schritt 2: Dynamische Elemente

Neue Elemente werden durch Delegation automatisch unterstützt:

const parent = document.querySelector("#parent");
const btn = document.createElement("button");
btn.textContent = "Klick mich";
parent.appendChild(btn);

Schritt 3: Custom Events

Eigene Events erstellen und auslösen:

const event = new CustomEvent("myEvent", { detail: { message: "Hallo!" } });
document.dispatchEvent(event);

document.addEventListener("myEvent", e => {
  console.log(e.detail.message); // Hallo!
});

Schritt 4: Klassen & Attribute manipulieren

Verwendung von classList und setAttribute:

const div = document.querySelector("#box");
div.classList.add("active");
div.setAttribute("data-id", 123);

Übung

document.querySelector("#parent").addEventListener("click", e => {
  if(e.target.tagName === "BUTTON") alert("Button geklickt!");
});

Aufgabe

Erstelle eine dynamische Liste:

• Elemente dynamisch hinzufügen und entfernen
• Event Delegation für Klicks auf Buttons verwenden

Beispiel:

// HTML
// <ul id="list"></ul>
// <button id="add">Element hinzufügen</button>

const list = document.querySelector("#list");
const addBtn = document.querySelector("#add");

addBtn.addEventListener("click", () => {
  const li = document.createElement("li");
  li.innerHTML = `Element Entfernen`;
  list.appendChild(li);
});

// Event Delegation für Entfernen-Buttons
list.addEventListener("click", e => {
  if(e.target.classList.contains("remove")) {
    e.target.parentElement.remove();
  }
});