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:
node.addEventListener
.node.removeEventListener
.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 deInputEvent
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>