Cos'è il modello di eventi nel browser?

Metodo di gestione delle interazioni dell'utente (clic, input, hover) e degli eventi di sistema (caricamento pagina, errori) nel browser web.

Concetti principali:

• Evento: Azione che si è verificata.
• Gestore dell'evento: Funzione che viene eseguita al verificarsi dell'evento.
• Oggetto evento (Event object): Viene passato al gestore e contiene informazioni sull'evento (tipo, elemento, coordinate, ecc.).

Flusso standard degli eventi:

1. Cattura (Fase di cattura): L'evento scende dall'elemento DOM superiore (Window, Document) fino all'elemento target. I gestori in questa fase si attivano per primi.
2. Fase di destinazione (Target phase): L'evento raggiunge l'elemento target dove si è verificato.
3. Bubbling (Fase di bubbling): L'evento risale dall'elemento target attraverso il DOM fino a Window. I gestori in questa fase si attivano dopo la cattura e la fase di destinazione.

Aggiunta di gestori:

• Attributi HTML (onclick, onload): Metodo obsoleto, non raccomandato per applicazioni complesse.
• Proprietà degli elementi DOM (element.onclick): È possibile assegnare un solo gestore per ogni tipo di evento per elemento.

  // Esempio
  const button = document.querySelector('button');
  button.onclick = function() {
      alert('Pulsante premuto!');
  };
  

• Metodo addEventListener: Metodo preferito. Permette di aggiungere più gestori per un evento e di controllare la fase di gestione (cattura o bubbling).

  // Esempio
  const button = document.querySelector('button');
  button.addEventListener('click', function(event) {
      console.log('Clic sul pulsante!', event);
  }, false); // false - bubbling, true - cattura
  

Il metodo removeEventListener viene usato per rimuovere i gestori.

Delegazione degli eventi: Attaccare un gestore a un elemento genitore per gestire gli eventi di elementi figli. Risparmia risorse e semplifica il lavoro con contenuti dinamici.

// Esempio di delega
const list = document.querySelector('ul');
list.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('Clic sull elemento della lista:', event.target.textContent);
    }
});