EventTarget en JavaScript

En este artículo vamos a explicar el sistema de eventos EventTarget en JavaScript, la base para que cualquier objeto pueda escuchar y despachar eventos en JavaScript. En JavaScript, el sistema de eventos es una de las características fundamentales que permite la interacción entre el usuario y la página web. Detrás de este sistema se encuentra EventTarget, una interfaz clave en la manipulación de eventos. Comprender el uso de EventTarget en JavaScript es esencial para trabajar con eventos de manera eficiente y estructurada.

¿Qué es EventTarget?

EventTarget es la interfaz base que proporciona la capacidad de gestionar eventos en JavaScript. Cualquier objeto que necesite escuchar o despachar eventos debe implementar esta interfaz. Entre los objetos que heredan de EventTarget, encontramos:

Window
Document
Elementos del DOM (button, div, canvas, etc.)
XMLHttpRequest
EventSource
WebSocket
AudioNode

Al ser una interfaz, EventTarget no se usa directamente en el código, sino que es implementada por los objetos que la heredan y permite así la escucha y propagación de eventos.

Métodos JavaScript EventTarget

El objetivo de EventTarget es proporcionar un mecanismo estandarizado para gestionar eventos de manera eficiente entre los distintos objetos dentro de JavaScript. Esta interfaz permite a los desarrolladores implementar los siguiente métodos:

Escuchar eventos con addEventListener().
Eliminar escuchadores de eventos con removeEventListener().
Despachar eventos manualmente con dispatchEvent().

Gracias a esta arquitectura, JavaScript mantiene un sistema de eventos flexible y reutilizable sin necesidad de reescribir código para cada tipo de objeto que maneje eventos.

addEventListener(type, listener, [useCapture])

Cuando usamos este método de EventTarget en JavaScript, permite registrar un manejador de eventos en un objeto. Su sintaxis básica es:

const button = document.querySelector("button");
button.addEventListener("click", function() {
    console.log("Botón clickeado");
});

type: Es una cadena de texto que indica el tipo de evento a escuchar (ej. «click», «mousemove»).
listener: Es la función que se ejecutará cuando ocurra el evento.
useCapture (opcional): Un booleano que determina si el evento debe capturarse en la fase de captura (true) o en la fase de burbuja (false, por defecto).

removeEventListener(type, listener, [useCapture])

Cuando usamos este método de EventTarget en JavaScript, permite eliminar un manejador de eventos previamente registrado con addEventListener(). Para que funcione correctamente, la función de escucha (listener) debe ser la misma referencia que se usó al añadir el evento.

function handleClick() {
    console.log("Botón clickeado");
}

button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick); // Se elimina el evento

dispatchEvent(event)

Cuando usamos este método de EventTarget en JavaScript, permite disparar eventos manualmente en un objeto EventTarget. Es útil para simulaciones de eventos o cuando se necesita que un elemento responda a un evento sin intervención del usuario.

const event = new Event("customEvent");
document.addEventListener("customEvent", () => {
    console.log("Evento personalizado activado");
});

document.dispatchEvent(event); // Dispara el evento manualmente