Cómo eliminar un oyente de eventos en JavaScript? | Explicado con ejemplos

JavaScript se usa altamente en el desarrollo de la página web. Al ser un lenguaje dinámico, es fácil cambiar los comportamientos de la página en tiempo de ejecución. Normalmente es más fácil de usar en el entorno del lado del cliente, ya que podemos hacer cambios muy rápidamente. Hoy vamos a hablar sobre otra operación de JavaScript, que es cómo podemos eliminar fácilmente al oyente del evento de un evento.

Eliminar al oyente del evento usando JavaScript

Eliminar el oyente del evento de un elemento HTML específico puede ser tan importante en algunos casos, ya que no desea que el evento se active varias veces sin ningún motivo. JavaScript puede ser muy útil para lograr esta funcionalidad, así que veamos cómo podemos hacer este trabajo fácilmente.

Método de removeventListener ()

RemoVentListener () es una función incorporada en JavaScript que se puede usar para eliminar los oyentes de eventos de los elementos HTML.Suponga que tiene el siguiente oyente de eventos adjunto a un elemento:

Haz click en mi


Ahora suponga que desea eliminar el evento de clic del botón, necesitará una referencia al elemento que contiene el oyente y la referencia de la función de devolución de llamada para eliminar un oyente de eventos de manera efectiva. Para eliminar el evento "Haga clic", el código irá así:

btn.RemoLEventListener ('hacer clic', hacer clic)

Sin embargo, no es una buena idea pasar un oyente de eventos una función de devolución de llamada sin nombre como esta:

btn.addEventListener ('Click', (e) =>
alerta ('se hizo clic en este botón');
)

No podrá eliminar el oyente del evento sin el nombre de la función de devolución de llamada, como se ve en el ejemplo anterior.

Eliminar el oyente del evento después de hacer clic en el botón

A veces es posible que no desee que se haga clic en el botón el doble como si se haga clic en Haga clic, el evento se activará y causará los problemas de procesamiento en el evento. Entonces, para manejar este problema al instante, necesitamos adjuntar un RemoVentListener () dentro de addevenetListener () método. Veamos cómo podemos lograr esta funcionalidad en el siguiente código:

Haz click en mi

Producción:

Entonces, con el ejemplo anterior, una vez que se haga clic en el botón, activará el evento adjunto y eliminará ese evento después de deshabilitar el botón para evitar múltiples clics al mismo tiempo desde el usuario.

Así es como te deshaces de los oyentes de eventos de JavaScript de HTML Elements. Para eliminar un oyente de eventos de un elemento HTML, debe cuidar las dos cosas, debe definir el tipo de evento y lo segundo es que debe proporcionar la función de referencia que se adjunta al oyente del evento.

Conclusión

El RemoVentListener () El método se utiliza cuando sea necesario que elimine el evento de un elemento HTML particular. Este método requiere dos argumentos, el primer argumento será el nombre del evento, mientras que el segundo argumento será la función que se adjunta al oyente del evento. En este artículo, hemos visto el ejemplo en el que hemos discutido cómo podemos simplemente eliminar un evento adjunto a un elemento HTML.