Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Herausforderung: Ereignisausbreitung und Delegation | Ereignisse und Ereignisbehandlung
Fortgeschrittene JavaScript-Meisterschaft

bookHerausforderung: Ereignisausbreitung und Delegation

Aufgabe

Sie erstellen eine dynamische Liste, in der Benutzer spezifische Elemente hinzufügen und löschen können.

  1. Verwenden Sie Ereignisdelegation, indem Sie einen einzigen Klick-Ereignislistener zum ul mit der ID dynamic-list hinzufügen;
  2. Wenn ein Element angeklickt wird:
    • Wenn das angeklickte Element ein <li> ist, zeigen Sie einen Alarm mit dem Text des angeklickten Elements an;
    • Wenn das angeklickte Element eine "Löschen"-Schaltfläche ist, entfernen Sie das entsprechende <li>-Element aus der Liste.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • Verwenden Sie event.target.tagName === 'LI', um zu überprüfen, ob das angeklickte Element ein <li> ist;
  • Verwenden Sie event.target.classList.contains('delete-btn'), um zu überprüfen, ob das angeklickte Element eine "Löschen"-Schaltfläche ist.
index.html

index.html

index.css

index.css

index.js

index.js

copy

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 5

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Awesome!

Completion rate improved to 2.22

bookHerausforderung: Ereignisausbreitung und Delegation

Swipe um das Menü anzuzeigen

Aufgabe

Sie erstellen eine dynamische Liste, in der Benutzer spezifische Elemente hinzufügen und löschen können.

  1. Verwenden Sie Ereignisdelegation, indem Sie einen einzigen Klick-Ereignislistener zum ul mit der ID dynamic-list hinzufügen;
  2. Wenn ein Element angeklickt wird:
    • Wenn das angeklickte Element ein <li> ist, zeigen Sie einen Alarm mit dem Text des angeklickten Elements an;
    • Wenn das angeklickte Element eine "Löschen"-Schaltfläche ist, entfernen Sie das entsprechende <li>-Element aus der Liste.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • Verwenden Sie event.target.tagName === 'LI', um zu überprüfen, ob das angeklickte Element ein <li> ist;
  • Verwenden Sie event.target.classList.contains('delete-btn'), um zu überprüfen, ob das angeklickte Element eine "Löschen"-Schaltfläche ist.
index.html

index.html

index.css

index.css

index.js

index.js

copy

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 5
some-alt