Herausforderung: Ereignisausbreitung und Delegation
Aufgabe
Sie erstellen eine dynamische Liste, in der Benutzer spezifische Elemente hinzufügen und löschen können.
- Verwenden Sie Ereignisdelegation, indem Sie einen einzigen Klick-Ereignislistener zum
ul
mit der IDdynamic-list
hinzufügen; - 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.
- Wenn das angeklickte Element ein
index.html
index.css
index.js
- 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.css
index.js
War alles klar?
Danke für Ihr Feedback!
Abschnitt 3. Kapitel 5
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Awesome!
Completion rate improved to 2.22
Herausforderung: 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.
- Verwenden Sie Ereignisdelegation, indem Sie einen einzigen Klick-Ereignislistener zum
ul
mit der IDdynamic-list
hinzufügen; - 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.
- Wenn das angeklickte Element ein
index.html
index.css
index.js
- 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.css
index.js
War alles klar?
Danke für Ihr Feedback!
Abschnitt 3. Kapitel 5