addEventListener, removeEventListener, Bubbing en JS
En el pasado, los navegadores han tenido inconsistencia en la forma de unir los detectores de eventos a los nodos de DOM, pero actualmente los navegadores modernos lo hacen más simple. Ahora vamos a ver cómo gestionar eventos para la web moderna.
addEventListener()
El objeto Window, objeto document y todos los nodos de tipo element, pueden ser objetivo de eventos, todos estos disponen de un método predefinido llamado addEventListener que nos permite asignar uno, dos o más controladores a un evento, este método le agrega un “escuchador (oyente)” al elemento, para que este atento a la interacción del usuario. La sintaxis es básicamente la siguiente:
nodoObjetivo.addEventListener(“nombreDeEvento”, funcionAEjecutar, parametroBooleanoOpcional)
El nodoObjetivo será un nodo que rescataremos normalmente con el método getElementById, el nombreDeEvento será el nombre del evento sin el prefijo on y el parametroBooleanoOpcional especificará si el evento capturado debe ser true o debe ser false, que es el valor que toma si no especificamos el parámetro.
En ejemplo anterior la etiqueta <button> con id “myBtn” con el método addEventListener le decimos que al hacer clic en el botón imprima en html “Hola Mundo”.
removeEventListener()
Este método nos permite remover o eliminar manejadores de evento agregado con addEventListener.
En el ejemplo primero le damos el método addEventListener diciéndole que cuando el mouse pase por el body se generen números aleatorios. Luego con el método removeEventListener se lo quitamos al hacer clic sobre el botón.
Bubbling
Es la secuencia interna del navegador, que muestra como se ejecuta el código de respuesta con un orden determinado, de modo que se va ejecutando la respuesta al evento desde el elemento mas interior del DOM, hasta llegar a la ejecución de los elementos mas externos.
Al hacer clic sobre el texto “Pincha aquí”, se ejecutan los eventos en el siguiente orden:
Esto es todo por hoy, te invito a seguir investigando y a practicar con distintos eventos para profundizar en su funcionamiento.
