Come rimuovere un ascoltatore di eventi in JavaScript? | Spiegato con esempi

JavaScript è molto utilizzato nello sviluppo della pagina web. Essendo un linguaggio dinamico, è facile cambiare i comportamenti della pagina in runtime. È normalmente più facile da usare nell'ambiente sul lato client in quanto siamo in grado di apportare modifiche molto rapidamente. Oggi parleremo di un'altra operazione JavaScript che è come possiamo facilmente rimuovere l'ascoltatore di eventi da un evento.

Rimozione dell'ascoltatore di eventi usando JavaScript

La rimozione dell'ascoltatore di eventi da uno specifico elemento HTML può essere così importante in alcuni casi in quanto non si desidera che l'evento venga attivato più volte senza alcun motivo. JavaScript può essere molto utile per ottenere questa funzionalità, quindi vediamo come possiamo facilmente fare questo lavoro.

Metodo RimuoviEventListener ()

RimuoviEventListener () è una funzione integrata in JavaScript che può essere utilizzata per rimuovere gli ascoltatori di eventi dagli elementi HTML.Supponiamo di avere il seguente ascoltatore di eventi allegati a un elemento:

Cliccami


Supponiamo ora di voler rimuovere l'evento click dal pulsante, avrai bisogno di un riferimento sia all'elemento contenente il listener che alla funzione di callback riferimento per rimuovere efficacemente un ascoltatore di eventi. Per rimuovere l'evento "clicca", il codice andrà così:

btn.RimuoviEventListener ('Click', cliccata)

Tuttavia, non è una buona idea passare un ascoltatore di eventi una funzione di callback senza nome come questa:

btn.addEventListener ('Click', (e) =>
avviso ("questo pulsante è stato cliccato");
)

Non sarai in grado di rimuovere l'ascoltatore di eventi senza il nome della funzione di callback, come mostrato nell'esempio sopra.

Rimozione dell'ascoltatore di eventi dopo aver fatto clic sul pulsante

A volte potresti non voler fare clic sul pulsante due volte come se fosse cliccato, l'evento attiverà e causerà i problemi di elaborazione nell'evento. Quindi, per gestire questo problema immediatamente, dobbiamo allegare a Rimodomina eventListener () dentro il addEventListener () metodo. Vediamo come possiamo ottenere questa funzionalità nel codice qui sotto:

Cliccami

Produzione:

Quindi, con l'esempio sopra, una volta fatto clic sul pulsante, attiverà l'evento allegato e rimuove quell'evento dopo aver disabilitato il pulsante per evitare più clic contemporaneamente dall'utente.

È così che ti sbarazzi degli ascoltatori di eventi JavaScript di HTML Elements. Per rimuovere un ascoltatore di eventi da un elemento HTML, devi prenderti cura delle due cose, devi definire il tipo di evento e la seconda cosa è che è necessario fornire la funzione di riferimento che è allegata all'ascoltatore di eventi.

Conclusione

IL Rimodomina eventListener () Il metodo viene utilizzato ogni volta che è necessario rimuovere l'evento da un particolare elemento HTML. Questo metodo richiede due argomenti, il primo argomento sarà il nome dell'evento mentre il secondo argomento sarà la funzione allegata all'ascoltatore di eventi. In questo articolo, abbiamo visto l'esempio in cui abbiamo discusso di come possiamo semplicemente rimuovere un evento allegato a un elemento HTML.