.png)
addEventListener en JavaScript
El metodo addEventListener en JavaScript sirve para adjuntar un manejador de eventos a un elemento especifico del arbol del DOM. De esta forma el elemento puede reaccionar a acciones del usuario o del propio sistema como click, input, submit, keydown, scroll y muchas otras.
Sintaxis
target.addEventListener(evento, funcion)
target elemento del DOM al que se le vincula el evento
evento tipo de evento que se quiere escuchar por ejemplo click o input
funcion funcion que se ejecuta cuando el evento ocurre recibe como argumento el objeto Event
Ejemplo basico
<body> <button id=needtoclick>haz clic</button> <script> const btn = document.getElementById(needtoclick) btn.addEventListener(click, () => console.log(Boton pulsado)) </script> </body>
Ten en cuenta los nombres correctos de las APIs del navegador document en minusculas y addEventListener con todas sus letras
removeEventListener
Este metodo elimina un manejador de eventos previamente registrado sobre un elemento del DOM. Es util para limpiar recursos o evitar que un componente siga reaccionando cuando ya no es necesario.
Sintaxis
target.removeEventListener(evento, funcion)
Para que la eliminacion funcione la referencia de la funcion debe ser exactamente la misma que se paso al registrar el evento
Consejo si usas una funcion flecha anonima al registrar no podras eliminarla despues porque no tendras la misma referencia. En su lugar guarda la funcion en una variable o define la funcion con nombre.
Hoisting en JavaScript
El hoisting es el comportamiento por el cual ciertas declaraciones se procesan antes de ejecutar el codigo. En terminos practicos
Se elevan las declaraciones de funcion function nombre y las variables declaradas con var aunque estas ultimas quedan inicialmente como undefined
No se elevan las expresiones de funcion asignadas a let o const ni las propias declaraciones let y const que permanecen en zona muerta temporal hasta su linea de inicializacion
Ejemplo de funcion declarada con hoisting
addDeclaracion() function addDeclaracion(){ console.log(Funcion declarada) } addDeclaracion()
La llamada anterior a la declaracion funciona porque la definicion de la funcion se eleva
Ejemplo de funcion expresion sin hoisting
addExpresion() produce error de referencia const addExpresion = function(){ console.log(Funcion expresion) } addExpresion()
En este caso la llamada antes de la asignacion falla porque ni la variable const ni la expresion son accesibles antes de su inicializacion
Buenas practicas
Usa nombres de metodos correctos addEventListener y removeEventListener
Guarda en una variable la funcion manejadora para poder retirarla despues con removeEventListener
Prefiere const o let para variables y expresiones de funcion y declara siempre antes de usar para evitar errores de referencia
Comprueba opciones adicionales del tercer argumento por ejemplo capture o passive cuando necesites ajustar el comportamiento avanzado del listener
Feliz programacion
