Entendiendo la delegación de eventos en Javascript.

Los eventos son acciones que ocurren cuando interactuamos con una web, por ejemplo, cuando hacemos click en un botón, escribimos en un input text... son la forma que tienen de interactuar el html y el javascript. Cuando un evento se lanza, el navegador notifica a la aplicación que algo ha ocurrido y que hay que manejarlo. Los eventos se controlan con funciones de javascript, de forma que cuando dicho evento ocurre, el navegador alerta a nuestra función que está escuchando que debe ejecutarse.

¿Cómo manejamos los eventos?

Hay dos formas de añadir eventos. Una desde el html con atributos añadiendo por ejemplo un onClick() en el elemento que queremos que desencadene la acción y otra desde el javascript utilizando el método addEventListener(). No sé si hay una forma mejor u otra peor, pero es mejor separar el javascript del html y evitar el antipatrón de mezclar html y js.

Sin embargo, con este enfoque “tenemos un problema” cuando queremos añadir el mismo evento a varios elementos del DOM. De esta forma, tendríamos tantos eventos como elementos del DOM que desencadenan la acción. Además, los elementos que se cargan de forma dinámica no se verían afectados por los eventos. Para solucionar estos problemas surge la delegación de eventos que es de lo que vamos a hablar en este post.

La delegación de eventos consiste en escuchar los eventos en el elemento padre para capturarlo cuando ocurra en sus hijos.

Antes de entrar en profundidad en la delegación de eventos, vamos a ver cómo funcionan los eventos con un ejemplo sencillo, añadiendo un evento a un botón. Aquí en el codesandbox podéis verlo.

const button = document.querySelector(".btn");

const changeTextButton = () => {
 button.classList.toggle("clicked");
};

button.addEventListener("click", changeTextButton);

¿Qué hemos hecho? El método addEventListener es la forma más habitual que usamos para registrar eventos. Recibe dos parámetros: el tipo de evento que queremos “escuchar” y la acción (o función) que queremos ejecutar cuando el evento suceda.

¿Cómo funcionan los eventos? Cuando clicamos en un botón, se desencadenan las siguientes fases:

1. Fase de captura: el evento empieza en el window, document y en el root y luego entra dentro de cada uno de los hijos.
2. Fase target: el evento se lanza sobre el elemento en el que se hace click.
3. Fase bubble: finalmente el evento sube hacia los ancestros desde el target hasta llegar de nuevo al root, document y window.

En este ejemplo podéis ver cómo se propagan las diferentes fases de los eventos.

Desde el punto de vista del código, un evento no es más que un objeto donde se almacena información relacionada con el mismo.

Algunas de las propiedades que podemos encontrar en el objeto evento son las siguientes:

• event.type: es el tipo de evento que hemos lanzado, en el caso del ejemplo sería el click, pero podría ser cualquier otro.
• event.target: es el elemento en el que se ha disparado el evento.
• defaultPrevented: indica si el evento puede ser cancelado con event.preventDefault.
• event.Phase: indica qué fase del flujo de eventos se está procesando.
• event.currentTarget: es el elemento en el que declaramos el evento, es decir, en que hemos declarado el addEventListener.

Aquí podéis ver más información sobre las propiedades y métodos de los eventos.

Ahora que ya sabemos qué son los eventos y cómo funcionan, vamos a ver cómo podemos trabajar con ellos. Veamos este ejemplo en el que mostramos una tabla con varias filas y columnas y, en cada celda, un botón de borrar. En este caso, siguiendo el ejemplo anterior, tendríamos que hacer algo similar a esto para capturar el evento de cada botón:

const buttons = document.querySelectorAll(‘.btn_deleted’);

buttons.forEach(button => {
    button.addEventListener('click', () => console.log('Clicked!'));
});

¿Qué tendríamos en este caso?

• Tendríamos un evento por cada botón. Imaginaros que tenemos 40 filas, tendríamos 40 botones con 40 eventos.
• Además, si esta tabla tuviese paginación, cada vez que cambiemos de página tendríamos que volver a declarar los eventos, ya que al cambiar de página, los perderíamos.
• Otro problema añadido es que si alguna de esas celdas se renderiza de forma dinámica tendríamos que esperar a que el elemento estuviera renderizado en el DOM ya que si el botón no existe aún no se puede declarar el evento asociado.

Para ayudarnos con estos dos problemas podemos usar la técnica de delegación de eventos.

La delegación de eventos consiste en declarar un evento en el contenedor del elemento sobre el que queremos lanzarlo. Al estar declarado en el padre, ¿cómo sabe cuándo tiene que lanzarse el evento al hacer click en un botón determinado?

Cuando lanzamos un evento, el navegador crea un objeto evento, donde recoge las propiedades de dicho evento. Utilizando dicha información, comprobamos a través del target cuál es el elemento que lanza el evento. En este caso, lo que hacemos es comprobar si el target tiene la clase ‘buttonClass’ y si la tiene se lanzará el evento.

Para entenderlo de forma fácil, con la delegación de eventos tenemos un elemento que está continuamente escuchando si se lanza o no un evento y que tendrá que cumplir la condición que le pongamos. Para comprobar que se cumple esta condición podemos usar el método matches() que nos devuelve “true” si el elemento seleccionado coincide con el que le hemos pasado dentro del método o “false” si no coincide.

Otra forma que tenemos de comprobar es si el target está contenido en cierto elemento para esto utilizaremos Node.contains(). Este método igual que el matches() nos devuelve un booleano, en este caso, lo que comprueba es si el selector que le pasamos es descendiente directo del nodo. Es útil, por ejemplo, cuando queremos cerrar un modal haciendo click fuera de este.

Aquí os dejo una librería que a mí personalmente me ha simplificado mucho la vida.

Para ello utilizo dos funciones: las funciones on y off.

const on = (type, selector, handler) => {
 const useCapture = ["blur", "focus"].includes(type);
 if (events[type] == null) {
   events[type] = [];
   document.addEventListener(type, run, useCapture);
 }

 events[type].push({
   selector,
   handler
 });
};

const off = (type, selector, handler) => {
 const handlers = events[type];
 events[type] = handlers
   ? handlers.filter(h => {
       return h.selector !== selector && h.handler !== handler;
     })
   : [];

 if (events[type].length === 0) {
   events[type] = null;
   document.removeEventListener(type, run);
 }
};

En este caso, los eventos están declarados en el document. Aquí sentiros libres de declararlos en el document o al padre del elemento target. La ventaja de utilizar el document es que siempre está ahí independientemente de que hagamos renderizado de forma dinámica, es un elemento que nunca desaparece.

Con la función “on” declaramos un evento que se lanzará cuando el target coincida con el elemento. Con la función “off” borramos el evento cuando el target coincida con el elemento que le indiquemos.

¿Cómo utilizamos esta función?

Si os fijáis en el archivo index.js:

on(“click”, “.wadus”, click);

• Primer parámetro: click es el nombre del evento que queremos atachar, puede ser change, input… o cualquier tipo de evento que necesitemos.
• Segundo parámetro: .wadus es nuestro target, en este caso, lo hacemos sobre la clase (de css) wadus.
• Tercer parámetro: focusHandler es la función que queremos que se lance cuando se hace click en el elemento.

Siguiendo el ejemplo anterior (el de la tabla) vamos a ver ahora el mismo ejemplo esta vez utilizando esta librería.

Esta técnica ya está siendo utilizada por otros frameworks y librerías. Desde hace ya algún tiempo, jquery tiene un método on y off para añadir eventos y removerlos. Os dejo este artículo donde explica cómo maneja la delegación de eventos React.

Como podemos ver, la delegación de eventos es útil para escuchar eventos en múltiples elementos, con tan solo un manejador. Al delegar en el padre, los eventos estarán siempre ahí. Desde el punto de vista del rendimiento de nuestra aplicación, puede parecer contraproducente tener un elemento escuchando todos los eventos, pero es justo todo lo contrario No tiene el mismo coste lanzar 40 eventos que uno, con lo cual nuestra performance mejorará.

¿Qué ventajas tiene delegar los eventos en el document o en el window?

• El document o el window siempre van a estar ahí, por lo que, de esta forma, nos olvidamos de tener que estar comprobando si el elemento existe en caso de contenidos dinámicos.
• Si tenemos los eventos delegados en el padre y, por error, lo borramos y no eliminamos sus eventos, podríamos ocasionar un memory leak.

Como hemos visto hay diferentes formas de trabajar con la delegación de eventos, así que utilizad aquella con la que os sintáis más cómodos. Desde que encontré esta librería, con las funciones on y off, para mí es de esas cosas que te las guardas para siempre y que aplico en todos los proyectos. Adaptarlo como mejor os convenga según vuestras necesidades. Si tenéis experiencia ya con delegación de eventos o algún tipo de duda y te apetece que hablemos, cuéntamela :)

Recursos:

• A Simple Explanation of Event Delegation in JavaScript
• Codex and box
• Codex and box
• MDN
• A Bit about Event Delegation in React
• jQuery
• Event Order