Reaccionar a lo que hace la persona.
addEventListener(): Ejecuta una función cada vez que ocurre un evento en un elemento.
click: Al pulsar un elemento (con el ratón, el dedo o la tecla Intro en un botón).
input y change: input salta con cada cambio mientras se escribe; change, al terminar (al salir del campo o elegir una opción).
submit y preventDefault(): Al enviar un formulario.
Reaccionar a lo que hace la persona: clics, teclas, cambios en un formulario. Prueba los ejemplos en el resultado.
Cada entrada lleva una explicación corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para cambiarlos y ejecutarlos: lo que escriben con console.log() sale en la consola.
Esencial. Ejecuta una función cada vez que ocurre un evento en un elemento: elemento.addEventListener("click", función).
Esencial. Al pulsar un elemento (con el ratón, el dedo o la tecla Intro en un botón). Para que algo se pueda pulsar con teclado, usa un <button>.
input salta con cada cambio mientras se escribe; change, al terminar (al salir del campo o elegir una opción).
Esencial. Al enviar un formulario. event.preventDefault() evita que la página se recargue, para gestionar los datos con JavaScript.
Al pulsar una tecla. event.key dice cuál ("Escape", "Enter", "a"…).
Esencial. El elemento sobre el que ocurrió el evento. Con closest() se sube hasta el que interesa.
Un solo evento en el contenedor en lugar de uno en cada hijo: funciona también con los elementos que se añadan después.
Cuando el HTML ya está cargado. Si el script va en el <head> con defer, no hace falta.
Deja de escuchar un evento. Hay que pasarle la misma función (con nombre) que se usó al añadirlo.
Código del tema: const boton = document.querySelector("#me-gusta");
Reaccionar a lo que hace la persona: clics, teclas, cambios en un formulario. Prueba los ejemplos en el resultado.
Cada entrada lleva una explicación corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para cambiarlos y ejecutarlos: lo que escriben con console.log() sale en la consola.
Esencial. Ejecuta una función cada vez que ocurre un evento en un elemento: elemento.addEventListener("click", función).
Esencial. Al pulsar un elemento (con el ratón, el dedo o la tecla Intro en un botón). Para que algo se pueda pulsar con teclado, usa un <button>.
input salta con cada cambio mientras se escribe; change, al terminar (al salir del campo o elegir una opción).
Esencial. Al enviar un formulario. event.preventDefault() evita que la página se recargue, para gestionar los datos con JavaScript.
Al pulsar una tecla. event.key dice cuál ("Escape", "Enter", "a"…).
Esencial. El elemento sobre el que ocurrió el evento. Con closest() se sube hasta el que interesa.
Un solo evento en el contenedor en lugar de uno en cada hijo: funciona también con los elementos que se añadan después.
Cuando el HTML ya está cargado. Si el script va en el <head> con defer, no hace falta.
Deja de escuchar un evento. Hay que pasarle la misma función (con nombre) que se usó al añadirlo.