Curso de JavaScript
Dale vida a la web.
Aprende a programar, crea interacciones y construye proyectos reales.
addEventListener registra una función que se ejecuta cada vez que ocurre un evento (como un clic) sobre un elemento, y le pasa automáticamente un objeto evento con información sobre lo que pasó.
Explicación
addEventListener conecta una función a un evento, y esa función recibe información sobre lo que ocurrió:
elemento.addEventListener("evento", funcion)Registra funcion para que se ejecute cada vez que ocurra ese evento en elemento, sin sobrescribir otros listeners que ya tenga.
function (evento) {...}La función recibe automáticamente un objeto evento con datos sobre lo que pasó (qué elemento, en qué posición, etc.).
evento.clientX / evento.clientYPropiedades del objeto evento con la posición del cursor (en píxeles) en el momento del clic.
"click", "mouseenter", "keydown"Algunos de los nombres de evento más comunes. addEventListener acepta cualquiera de ellos como primer argumento.
Reto rápido
Cambia "click" por "dblclick" en addEventListener y confirma que ahora necesitas doble clic para que el contador avance.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
A diferencia de asignar boton.onclick = funcion (que solo permite una función y la siguiente asignación sobrescribe a la anterior), addEventListener te deja agregar varias funciones independientes al mismo evento.
Dato extra
También puedes quitar un listener con removeEventListener, pero necesitas pasarle la misma referencia de función que usaste en addEventListener: no puedes quitarlo si lo agregaste con una función anónima.
Error común
Escribir el nombre del evento con el prefijo "on", como addEventListener("onclick", ...) en vez de addEventListener("click", ...): el prefijo on solo se usa en propiedades como onclick, el nombre del evento en addEventListener va sin él.
Siguiente paso
Ya sabes reaccionar a eventos genéricos como el clic. Ahora veamos los eventos propios de los formularios: enviar y escribir en un campo.
Ir a la siguiente lección