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
course content

Kursinhalt

Fortgeschrittene JavaScript-Meisterschaft

Fortgeschrittene JavaScript-Meisterschaft

1. Klassen
Willkommen Zum KursKlassendeklarationHerausforderung: Eine Klasse ErstellenKlassenmethodenHerausforderung: Methoden zu einer Klasse HinzufügenParameterobjektPrivate EigenschaftenHerausforderung: Implementierung Privater Properties in Einer KlasseGetter und SetterHerausforderung: Verwalten von Eigenschaften mit Getters und SettersStatische EigenschaftenStatische MethodenHerausforderung: Verwenden von Statischen Eigenschaften und Methoden in Einer KlasseVererbung mit Extends und Verwendung von Super()Herausforderung: Klassenvererbung mit extends und Verwendung von super
2. DOM-Manipulation
Was Ist das DOM?Abfragen des DOMHerausforderung: Abfragen des DOMVerstehen der DOM-HierarchieHerausforderung: DOM-HierarchieDOM-EigenschaftenArbeiten mit Element-AttributenHerausforderung: Arbeiten mit Element-Eigenschaften und -AttributenElemente HinzufügenElemente EntfernenHerausforderung: Hinzufügen und Entfernen von ElementenÄndern von ElementstilenHerausforderung: Ändern von Elementstilen
3. Ereignisse und Ereignisbehandlung
Einführung in Ereignisse und Ereignis-ListenerDas EreignisobjektHerausforderung: Ereignisse und Event-ListenerEreignisausbreitung und DelegierungHerausforderung: Ereignisausbreitung und DelegationTastatur- und MausereignisseVerwalten von Event-Listenern
4. Asynchrones JavaScript und APIs
Einführung in Asynchrones JavaScriptRückrufeVersprechenAsync/AwaitArbeiten mit APIsPraktische API-IntegrationHerausforderung: Arbeiten mit APIArbeiten Mit DrittanbieterbibliothekenHerausforderung: Arbeiten mit Drittanbieter-BibliothekenUmgang mit Mehreren Asynchronen Anfragen

book
Herausforderung: 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.

html

index.html

css

index.css

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.

html

index.html

css

index.css

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
ChatGPT

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

course content

Kursinhalt

Fortgeschrittene JavaScript-Meisterschaft

Fortgeschrittene JavaScript-Meisterschaft

1. Klassen
Willkommen Zum KursKlassendeklarationHerausforderung: Eine Klasse ErstellenKlassenmethodenHerausforderung: Methoden zu einer Klasse HinzufügenParameterobjektPrivate EigenschaftenHerausforderung: Implementierung Privater Properties in Einer KlasseGetter und SetterHerausforderung: Verwalten von Eigenschaften mit Getters und SettersStatische EigenschaftenStatische MethodenHerausforderung: Verwenden von Statischen Eigenschaften und Methoden in Einer KlasseVererbung mit Extends und Verwendung von Super()Herausforderung: Klassenvererbung mit extends und Verwendung von super
2. DOM-Manipulation
Was Ist das DOM?Abfragen des DOMHerausforderung: Abfragen des DOMVerstehen der DOM-HierarchieHerausforderung: DOM-HierarchieDOM-EigenschaftenArbeiten mit Element-AttributenHerausforderung: Arbeiten mit Element-Eigenschaften und -AttributenElemente HinzufügenElemente EntfernenHerausforderung: Hinzufügen und Entfernen von ElementenÄndern von ElementstilenHerausforderung: Ändern von Elementstilen
3. Ereignisse und Ereignisbehandlung
Einführung in Ereignisse und Ereignis-ListenerDas EreignisobjektHerausforderung: Ereignisse und Event-ListenerEreignisausbreitung und DelegierungHerausforderung: Ereignisausbreitung und DelegationTastatur- und MausereignisseVerwalten von Event-Listenern
4. Asynchrones JavaScript und APIs
Einführung in Asynchrones JavaScriptRückrufeVersprechenAsync/AwaitArbeiten mit APIsPraktische API-IntegrationHerausforderung: Arbeiten mit APIArbeiten Mit DrittanbieterbibliothekenHerausforderung: Arbeiten mit Drittanbieter-BibliothekenUmgang mit Mehreren Asynchronen Anfragen

book
Herausforderung: 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.

html

index.html

css

index.css

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.

html

index.html

css

index.css

js

index.js

copy

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 5
Wir sind enttäuscht, dass etwas schief gelaufen ist. Was ist passiert?
some-alt