Guarda gli eventi scattare in un log dal vivo, poi copia i pattern addEventListener per click, submit, scroll, delega, once, passive e pulizia con AbortController.
Un event listener è una funzione che il browser chiama quando succede qualcosa a un elemento, come un clic, l'invio di un modulo o uno scroll. Lo colleghi con element.addEventListener(type, handler, options). L'oggetto options attiva once, passive, capture o un segnale di abort, e removeEventListener scollega di nuovo la stessa funzione in seguito.
Opzioni di addEventListener
Opzione
Predefinito
Effetto
Rimuove il listener automaticamente dopo la prima chiamata
false (true per wheel e touch su window, document e body)
Promette di non chiamare preventDefault, così lo scroll non aspetta mai
Viene eseguito durante la discesa verso il target invece che durante la risalita
Un AbortSignal; interromperlo rimuove il listener
Gli eventi sono più facili da capire quando li puoi vedere. Il log degli eventi qui sotto registra ogni chiamata dei listener in una piccola area di test, così puoi cliccare, scrivere, inviare e scrollare e osservare l'ordine, il target e l'effetto di ogni opzione. Poi copia i pattern per i compiti che hai davvero.
Usa i controlli nell'area di test: clicca i pulsanti, scrivi nel campo, invia il modulo e scrolla il riquadro.
Ogni chiamata di un listener compare nel log con il tipo di evento, l'elemento che l'ha generato e l'elemento che l'ha gestito.
Attiva once per vedere un listener sparire dopo una chiamata, oppure disattiva la delega per vedere la lista gestire i clic elemento per elemento.
Copia uno qualsiasi degli esempi qui sotto. Sono tutti JavaScript puro senza librerie.
Passa una funzione con nome quando prevedi di rimuovere il listener. Una arrow function inline non può essere ritrovata in seguito.
AbortController rimuove un intero gruppo di listener con una sola chiamata abort(), il che si adatta ai componenti che vengono montati e smontati.
Ascolta submit sul modulo, non click sul pulsante, così viene gestito anche il tasto Invio premuto in un campo.
Usa event.target.closest("selector") negli handler delegati. Un clic su un'icona dentro un pulsante trova comunque il pulsante.
focus e blur non fanno bubbling. Delega invece focusin e focusout.
Domande frequenti
Cos'è la delega degli eventi?
Invece di collegare un listener a ogni elemento, ne colleghi uno a un genitore comune. Poiché la maggior parte degli eventi risale per bubbling, il genitore riceve i clic di tutti i figli, compresi gli elementi aggiunti dopo, e usa event.target per capire quale è stato cliccato.
Perché removeEventListener non rimuove il mio listener?
Deve ricevere lo stesso riferimento alla funzione e la stessa impostazione di capture passati ad addEventListener. Due arrow function con codice identico sono comunque funzioni diverse, quindi definisci l'handler una volta e passa quella variabile in entrambi i casi.
Cosa fa passive: true?
Dice al browser che il tuo handler non chiamerà preventDefault, così la pagina può iniziare a scrollare subito invece di aspettare che il tuo codice finisca. I browser usano già passive come predefinito per i listener wheel e touch su window, document e body.
Qual è la differenza tra target e currentTarget?
target è l'elemento più interno da cui è partito l'evento, e resta lo stesso mentre l'evento risale. currentTarget è l'elemento il cui listener è in esecuzione in quel momento, e cambia a ogni livello.
form.submit() genera l'evento submit?
No. Chiamare form.submit() da uno script salta l'evento submit e salta la validazione. Chiama form.requestSubmit() quando vuoi che vengano eseguiti i tuoi listener submit e i controlli integrati.
addEventListener o onclick?
La proprietà onclick contiene una sola funzione, quindi assegnarne una seconda sostituisce la prima. addEventListener permette a più listener indipendenti di condividere un elemento e supporta l'oggetto options, quindi è la scelta predefinita migliore.
Come viaggia un evento
Un evento inviato si muove in tre fasi. Scende dalla window al target nella fase di capture, raggiunge il target, poi risale per bubbling attraverso ogni antenato. I listener vengono eseguiti nella fase di bubbling, a meno che tu non chieda capture.
stopPropagation interrompe il percorso, così gli antenati non lo ricevono mai. Usalo di rado, perché i listener delegati e gli strumenti di analytics più in alto nell'albero smettono di funzionare senza avvisare.
Scrollare senza rallentare la pagina
Gli eventi scroll possono scattare molte volte per ogni frame di movimento. Mantieni l'handler minimo, leggi le posizioni invece di scrivere il layout e raggruppa gli aggiornamenti visivi dentro requestAnimationFrame.
Per compiti come mostrare elementi quando entrano nella vista, un IntersectionObserver di solito costa meno che misurare a ogni scroll. L'evento scrollend, Baseline da dicembre 2025 secondo MDN, scatta una sola volta quando il movimento si ferma.
Ripulire i listener
I listener su oggetti a lunga vita come window o document mantengono vivo il loro handler e tutto ciò a cui fa riferimento. Quando la parte della pagina che ne aveva bisogno sparisce, rimuovili.
L'opzione signal rende tutto ordinato. Crea un AbortController per funzionalità, passa il suo signal a ogni listener e chiama abort() una volta durante lo smontaggio.
I tipi di evento che userai di più
Eventi comuni e dove ascoltarli
Evento
Scatta quando
Fa bubbling?
Un puntatore viene premuto e rilasciato, oppure Invio o Spazio su un pulsante
Sì
Il valore di un campo cambia mentre il visitatore scrive
Sì
Il valore di un campo viene confermato, per esempio al blur o a una selezione
Sì
Un modulo viene inviato; scatta sull'elemento form
Sì
Viene premuto un tasto
Sì
focus / blur
Un elemento ottiene o perde il focus
No
focusin / focusout
Come focus e blur, ma con bubbling
Sì
DOMContentLoaded
L'HTML è stato analizzato e gli script deferred sono stati eseguiti; ascoltalo su document
Non rilevante
Pattern da copiare
Click con un handler con nome che puoi rimuovere
Tenere la funzione in una variabile è ciò che fa funzionare removeEventListener.
Gestire l'invio di un modulo senza ricaricare
preventDefault blocca la navigazione del browser. event.submitter ti dice quale pulsante di invio è stato usato.
Delega degli eventi su una lista
Un solo listener sulla lista gestisce ogni pulsante elimina, comprese le righe aggiunte dopo il caricamento della pagina.
Un listener scroll passive limitato a un aggiornamento per frame
passive: true permette allo scroll di partire subito, e requestAnimationFrame limita il lavoro a una volta per frame.
once e AbortController
Il primo listener viene eseguito una sola volta. Gli altri vengono rimossi tutti insieme da una sola chiamata abort().
Scorciatoia da tastiera che ignora la digitazione nei campi
Controllare il target evita che la scorciatoia scatti mentre qualcuno digita una barra in una casella di ricerca.
Mele
Pane
Caffè
click sul pulsante: target {target}
(once: ora rimosso)
click arrivato all'area di test (fase {phase}): target {target}, currentTarget {current}
input: il valore ora è "{value}"
change: valore confermato
submit sul modulo, submitter {submitter}; preventDefault ha bloccato il ricaricamento
scroll (passive, uno per frame): scrollTop {n}
click delegato sulla lista: elemento {item}
listener per elemento: {item}
Log degli eventi dal vivo
Clicca, scrivi, invia e scrolla nell'area di test. Ogni chiamata di un listener viene scritta nel log con tipo, target e current target.