Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Impara Sfida: Gestire la Propagazione e la Delega degli Eventi | Gestione degli Eventi e Interazioni Utente in JavaScript
Padronanza Avanzata di JavaScript

bookSfida: Gestire la Propagazione e la Delega degli Eventi

Compito

Si sta creando un elenco dinamico in cui gli utenti possono aggiungere ed eliminare elementi specifici.

  1. Utilizzare la delegazione degli eventi aggiungendo un unico event listener di tipo click al ul con ID dynamic-list;
  2. Quando un elemento viene cliccato:
    • Se l'elemento cliccato è un <li>, mostrare un avviso con il testo dell'elemento selezionato;
    • Se l'elemento cliccato è un pulsante "Delete", rimuovere il relativo elemento <li> dall'elenco.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • Utilizzare event.target.tagName === 'LI' per verificare se l'elemento cliccato è un <li>;
  • Utilizzare event.target.classList.contains('delete-btn') per verificare se l'elemento cliccato è un pulsante "Delete".
index.html

index.html

index.css

index.css

index.js

index.js

copy

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 3. Capitolo 5

Chieda ad AI

expand

Chieda ad AI

ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

Suggested prompts:

Can you show me the JavaScript code for handling the event delegation?

How do I add new items to the dynamic list?

Can you explain how the delete functionality works in more detail?

Awesome!

Completion rate improved to 2.22

bookSfida: Gestire la Propagazione e la Delega degli Eventi

Scorri per mostrare il menu

Compito

Si sta creando un elenco dinamico in cui gli utenti possono aggiungere ed eliminare elementi specifici.

  1. Utilizzare la delegazione degli eventi aggiungendo un unico event listener di tipo click al ul con ID dynamic-list;
  2. Quando un elemento viene cliccato:
    • Se l'elemento cliccato è un <li>, mostrare un avviso con il testo dell'elemento selezionato;
    • Se l'elemento cliccato è un pulsante "Delete", rimuovere il relativo elemento <li> dall'elenco.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • Utilizzare event.target.tagName === 'LI' per verificare se l'elemento cliccato è un <li>;
  • Utilizzare event.target.classList.contains('delete-btn') per verificare se l'elemento cliccato è un pulsante "Delete".
index.html

index.html

index.css

index.css

index.js

index.js

copy

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 3. Capitolo 5
some-alt