La magia de JavaScript está en detectar eventos y reaccionar a ellos, con esto nuestras aplicaciones se vuelven mas interesantes.

En esta clase veremos 2 métodos para manejar eventos:


addEventListener

Este método nos permite escuchar algún evento del nodo de donde fue llamado.

const action = () => { console.log("Diste un click!!")}

input.addEventListener('click', action);

<aside> 💡 En este ejemplo vemos que como primer argumento le pasamos el evento que queremos “escuchar” (click reaccion cuando hacen click al nodo) y una función que ejecutará la acción al detectar el evento.

</aside>

También podemos definir la función ahi mismo, el único problema de hacer esto es que no podrás eliminar ese evento posteriormente.

input.addEventListener('click', () => console.log("ey"));

Algo mas a tener en cuenta es que la función puede recibir algo (event), esto es un instancia de InputEvent el cual tiene varias propiedades que podrían interesarte como desarrollador.

input.addEventListener('input', (event) => console.log(event));

<aside> 💡 Input es el evento que escuchar cada que se escribe algo en un input.

</aside>