Introduzione agli eventi del browser in JavaScript

Padroneggiare gli eventi del browser in JavaScript

Un evento del browser è un segnale che indica che qualcosa è accaduto sulla pagina — l'utente ha cliccato un pulsante, è stato premuto un tasto, un'immagine ha finito di caricarsi, la finestra è stata ridimensionata. Reagire a questi segnali è ciò che trasforma un documento statico in un'applicazione interattiva.

Questa guida spiega cosa sono gli eventi, i tre modi per ascoltarli (e quale preferire), cosa offre l'oggetto evento, come smettere di ascoltare, e illustra sei esempi pratici e funzionanti. Se sei nuovo al linguaggio, inizia prima con l'introduzione a JavaScript.

Comprendere gli eventi del browser

Un evento è un'azione o un'occorrenza che il browser rileva e consente al tuo codice di gestire. Gli eventi si dividono in due grandi categorie:

• Eventi generati dall'utente — clic del mouse, digitazione, spostamento del puntatore, invio di un modulo.
• Eventi generati dal sistema — il completamento del caricamento della pagina, il fallimento nel caricamento di un'immagine, la fine di un'animazione CSS, il ridimensionamento della finestra.

Tipi di eventi

Ecco alcuni degli eventi più comuni, raggruppati per categoria:

Ogni categoria ha il proprio capitolo dedicato: vedi eventi del mouse, eventi della tastiera, eventi di invio del form e eventi di caricamento delle risorse.

Tre modi per aggiungere handler agli eventi

Esistono tre modi per reagire a un evento, elencati dal meno al più flessibile.

1. Attributo HTML (onclick="...") — veloce ma mescola JavaScript nel markup e consente un solo handler. Da evitare nei progetti reali.

<button onclick="alert('Button clicked!')">Click Me!</button>

2. Proprietà DOM (element.onclick) — mantiene il codice in JavaScript, ma assegnare un nuovo handler sovrascrive il precedente, quindi è ancora possibile un solo handler per evento.

<button id="myButton">Click Me!</button>

document.getElementById('myButton').onclick = function () {
  alert('Button clicked!');
};

3. addEventListener (consigliato) — l'approccio standard. Puoi associare più handler per lo stesso evento, controllare la fase di cattura/bubbling e rimuovere il handler in seguito.

<button id="myButton">Click Me!</button>

document.getElementById('myButton').addEventListener('click', function () {
  alert('Button clicked!');
});

addEventListener è preferito perché consente di registrare più listener per lo stesso evento e offre un controllo più fine sulla gestione degli eventi — ad esempio chiamando event.stopPropagation() o event.preventDefault(). Accetta anche un object di opzioni: { once: true } esegue il handler una sola volta, e { capture: true } ascolta durante la fase di cattura (vedi bubbling e capturing).

Rimuovere un event listener

Un listener rimane associato finché non lo rimuovi (o l'elemento non viene eliminato dal garbage collector). Per rimuoverlo devi passare la stessa riferimento alla funzione che hai aggiunto — una funzione anonima inline non può essere rimossa perché non esiste un riferimento ad essa.

function handleClick() {
  console.log('clicked');
}

const btn = document.getElementById('myButton');
btn.addEventListener('click', handleClick);

// later — stops the handler from firing again
btn.removeEventListener('click', handleClick);

L'oggetto evento

Quando si attiva un evento, il browser crea un oggetto evento che descrive quanto accaduto e lo passa come primo argomento al tuo handler. Le proprietà utili includono:

• event.type — il nome dell'evento, ad es. "click".
• event.target — l'elemento che ha effettivamente attivato l'evento.
• event.currentTarget — l'elemento a cui è associato il listener (uguale a this in un handler con funzione regolare).
• event.preventDefault() — annulla l'azione predefinita del browser (ad es. seguire un link).
• event.stopPropagation() — impedisce all'evento di fare bubbling verso gli elementi antenati.

<button id="myButton">Click Me!</button>
<div style="margin-top:10px;" id="eventInfo"></div>

<script>
  document.getElementById('myButton').addEventListener('click', function(event) {
    var eventInfo = 'Event Type: ' + event.type + '<br />Clicked Element: ' + event.target.tagName;
    document.getElementById('eventInfo').innerHTML = eventInfo;
  });
</script>

Esempi pratici di gestione degli eventi del browser

Approfondiamo alcuni esempi concreti che mostrano come gestire gli eventi del browser in scenari reali.

Esempio 1: Evento di invio del form

Gestione dell'invio di un form per validare l'input prima di inviare i dati a un server:

<form id="loginForm">
  Username: <input type="text" name="username" required />
  Password: <input type="password" name="password" required />
  <button type="submit">Login</button>
</form>

<script>
  document.getElementById('loginForm').addEventListener('submit', function(event) {
    event.preventDefault(); // Prevent the form from submitting normally
    if (this.username.value.length < 4 || this.password.value.length < 4) {
      alert('Username and password must be at least 4 characters long.');
    } else {
      this.submit(); // Submit the form manually if validation passes
      alert('successfully submitted');
    }
  });
</script>

(Nota: Qui viene usata una funzione regolare invece di una arrow function per preservare il contesto this, consentendo a this.username e this.password di referenziare correttamente gli elementi del form.)

Esempio 2: Gestione degli eventi mouseover e mouseout

Cambiare lo stile di un pulsante quando il mouse vi passa sopra e ripristinarlo quando il mouse lo abbandona:

<button id="hoverButton">Hover Over Me!</button>

<script>
  const button = document.getElementById('hoverButton');
  button.addEventListener('mouseover', function() {
    this.style.backgroundColor = 'green';
  });
  button.addEventListener('mouseleave', function() {
    this.style.backgroundColor = '';
  });
</script>

Esempio 3: Eventi della tastiera

Eseguire una funzione quando viene premuto il tasto Invio:

<input type="text" id="inputField" placeholder="Type something and press Enter" />

<script>
  document.getElementById('inputField').addEventListener('keydown', function(event) {
    if (event.key === 'Enter') {
      alert('You pressed Enter!');
    }
  });
</script>

Esempio 4: Funzionalità di drag and drop

Implementazione del drag and drop per un semplice trasferimento di immagini all'interno di una pagina web:

<span>Drop image below</span>
<div id="dragArea" style="width: 300px; height: 300px; border: 2px dashed #ccc;">
  
</div>
<img id="draggableImage" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Crect width='150' height='150' fill='%234f46e5'/%3E%3Ctext x='75' y='80' fill='white' font-size='18' text-anchor='middle'%3EDrag me%3C/text%3E%3C/svg%3E" draggable="true" style="width: 150px; height: 150px;">

<script>
  const dragArea = document.getElementById('dragArea');
  const draggableImage = document.getElementById('draggableImage');

  // Event listener for the drag start
  draggableImage.addEventListener('dragstart', function(event) {
    event.dataTransfer.setData("text/plain", event.target.id);
  });

  // Event listener for dragging over the drag area
  dragArea.addEventListener('dragover', function(event) {
    event.preventDefault(); // Necessary to allow the drop
  });

  // Event listener for drop
  dragArea.addEventListener('drop', function(event) {
    event.preventDefault(); // Prevent default behavior (like opening as link for some elements)
    const data = event.dataTransfer.getData("text/plain");
    const image = document.getElementById(data);
    dragArea.appendChild(image);
  });
</script>

Spiegazione:

• Drag Start: Quando inizi a trascinare l'immagine, l'ID dell'immagine viene salvato nei dati di trascinamento.
• Drag Over: Impedire l'azione predefinita è necessario per consentire il rilascio.
• Drop: Al rilascio, l'immagine viene spostata nell'area di destinazione.

Esempio 5: Eventi di inizio e fine animazione

Utilizzo di animazioni CSS e gestione del loro inizio e fine con JavaScript:

<div id="animateBox" style="width: 100px; height: 100px; background: red; position: relative; animation: moveBox 5s 2;"></div>
<div id="animationStatus"></div>

<style>
  @keyframes moveBox {
    0% { left: 0; }
    50% { left: 200px; }
    100% { left: 0; }
  }
</style>

<script>
  const box = document.getElementById('animateBox');
  const statusDisplay = document.getElementById('animationStatus');

  box.addEventListener('animationstart', function() {
    statusDisplay.innerHTML = 'Animation started';
  });

  box.addEventListener('animationend', function() {
    statusDisplay.innerHTML = 'Animation ended';
  });

  box.addEventListener('animationiteration', function() {
    statusDisplay.innerHTML = 'Animation iteration';
  });
</script>

(Nota: animationstart e gli eventi correlati sono standard nei browser moderni. Le versioni più vecchie di Safari potrebbero richiedere prefissi vendor come -webkit-animationstart, ma si raccomandano i nomi standard per lo sviluppo attuale.)

Spiegazione:

• animationstart si attiva una volta all'inizio dell'animazione.
• animationiteration si attiva all'inizio di ogni ripetizione — utile quando un'animazione è impostata per essere eseguita più volte.
• animationend si attiva una volta al completamento dell'animazione. Il div #animationStatus viene aggiornato ad ogni evento per fornire un feedback in tempo reale sulla pagina.

Esempio 6: Eventi personalizzati

Creazione e dispatching di eventi personalizzati per gestire scenari specifici dell'applicazione:

<button id="customEventButton">Trigger Custom Event</button>

<script>
  // Creating a custom event
  const myEvent = new CustomEvent('myCustomEvent', {
    detail: { message: 'Custom event triggered' }
  });

  // Event listener for custom event
  document.addEventListener('myCustomEvent', function(event) {
    alert('Event Message: ' + event.detail.message);
  });

  // Dispatch the custom event when button is clicked
  document.getElementById('customEventButton').addEventListener('click', function() {
    document.dispatchEvent(myEvent);
  });
</script>

Spiegazione:

• Creazione dell'evento personalizzato: Definisce un evento personalizzato con dati aggiuntivi (detail contenente un messaggio).
• Gestione dell'evento: Configura un listener per l'evento personalizzato che mostra un alert con il messaggio dal dettaglio dell'evento.
• Attivazione dell'evento: Attiva l'evento personalizzato al click di un pulsante.

Best practice

• Preferisci addEventListener rispetto agli attributi inline onclick — mantiene il comportamento separato dal markup e supporta più handler.
• Usa funzioni regolari quando hai bisogno di this per riferirsi all'elemento; usa le arrow function quando non ne hai bisogno, e leggi event.currentTarget invece.
• Rimuovi i listener che non ti servono più con removeEventListener (passando lo stesso riferimento alla funzione) per evitare perdite di memoria, specialmente nelle single-page app.
• Associa un singolo listener a un elemento padre invece di molti a ciascun elemento figlio quando gestisci elenchi — questa tecnica, chiamata event delegation, si basa sul bubbling degli eventi.
• Applica il throttle agli eventi ad alta frequenza come scroll e resize per evitare l'esecuzione di operazioni costose ad ogni attivazione; vedi ottimizzazione delle performance del DOM.

Conclusione

Gli eventi del browser sono il ponte tra ciò che fa l'utente e come risponde il tuo codice. I punti chiave: usa addEventListener per la flessibilità, leggi ciò di cui hai bisogno dall'oggetto evento, chiama preventDefault() o stopPropagation() quando devi sovrascrivere il comportamento predefinito, e rimuovi i listener che non ti servono più.

Da qui, esplora i capitoli dedicati agli eventi del mouse, agli eventi della tastiera, alla gestione dell'invio dei form e al dispatching di eventi personalizzati per costruire interfacce più ricche e guidate dagli eventi.

Esercitati