Z&W
Eventos en JavaScript
Cualquier actividad producida por un usuario se denomina Eventos: pulsar una tecla, mover el ratón, hacer scroll, pulsar un botón… Y todos los eventos pueden ser escuchados para lanzar acciones. En otras palabras, podemos detectar y vincular cada evento a una funcionalidad de JavaScript. ¡Incluso extraer información!
Tipos de Eventos Principales
click
Se hace clic izquierdo con el ratón.
scroll
Se mueve el scroll.
keydown
Se pulsa una tecla del teclado.
submit
Se envía un formulario.
Más Eventos Importantes
load
Se ha terminado de cargar la página.
focus
Un input recibe el foco.
blur
Un input pierde el foco.
Eventos de Animación y Transición
Animaciones
  • animationstart: Empieza una animación.
  • animationend: Termina una animación.
Transiciones
  • transitionstart: Empieza una transición.
  • transitionend: Termina una transición.
Eventos del Ratón
contextmenu
Se hace clic derecho con el ratón.
mouseenter
Entra el cursor del ratón.
mouseleave
Sale el cursor del ratón.
mousemove
Se mueve el cursor del ratón.
Uso de addEventListener
Deben aplicarse en addEventListener, una función que posee todos los objetos de DOM (cualquier etiqueta que captures).
document.querySelector("#formulario").addEventListener("submit", function(evento) { 
    console.log('Se ha enviado el formulario'); 
}, false);
Parámetros de addEventListener
Nombre de evento
En nuestro ejemplo ha sido submit.
Función a ejecutar
Función que se ejecutará cuando se detecte el evento. Puede ser una función anónima o la referencia.
Propagación
Boleano para indicar si debe escuchar todo el árbol del DOM (cuando esta true) o solo escuchar la etiqueta (cuando esta false).
Documentación de Eventos
Hay muchos más. Puedes ojear la lista completa en la documentación de Mozilla Developer.
Ahora que ya conoces que son los eventos y cuales son los más destacables, vamos a probar algunos ejemplos de su uso cotidiano.
Ejemplo: Clic sobre botón
HTML del botón
Creamos un botón con un id específico
Captura del elemento
Capturamos el botón usando querySelector
Escucha del evento
Añadimos un listener para el evento 'click'
Ejecución de la función
Al hacer clic, se imprime "funciono" en la consola
Código: Clic sobre botón
<input id="boton" type="button" value="Aprétame">

<script>
// Capturamos el boton
const boton = document.querySelector('#boton');

// Escuchamos, del boton, el evento 'click'. Ejecutaremos la función del segundo parámetro.
boton.addEventListener('click', function(evento) {
    console.log('funciono');
}, false);
</script>
Ejemplo: Apretar una tecla

Crear campo de texto
Input donde el usuario escribirá

Definir función manejadora
Función que verifica si se pulsó Enter

Añadir event listener
Escuchar el evento keydown en el body

Mostrar alerta
Si la tecla es Enter, mostrar mensaje
Código: Apretar una tecla
<input id="campo" type="text" placeholder="Escribe y pulsa Enter cuando acabes">

<script>
// Functiones
function instrucciones(evento) {
    // Filtra por la tecla Enter
    if(evento.code === "Enter") {
        alert("Me has pulsado enter");
    }
}

// Eventos
document.body.addEventListener("keydown", instrucciones);
</script>
Identificación de Teclas
Es importarte destacar la condicional evento.code === "Enter". En caso de querer actuar sobre otra tecla, deberás buscar cual es el código de la tecla. Puedes jugar imprimiendo evento.code o buscar la tecla en la lista completa de Mozilla.
Ejemplo: Scroll

Añadir event listener
Escuchar el evento scroll en el documento
Capturar posición
Obtener la posición vertical con window.scrollY
Mostrar resultado
Imprimir la posición en la consola
Código: Scroll
document.addEventListener("scroll", function(evento) {
    const ultimaPosicion = window.scrollY;
    console.log(ultimaPosicion)
});
A partir de aquí, el resto del eventos son prácticamente iguales. Solo queda practicar.
Flujo de Trabajo con Eventos
Acción del usuario
El usuario interactúa con la página (clic, tecla, scroll...)
Detección del evento
El navegador detecta la acción y crea un objeto evento
Ejecución del listener
Se ejecuta la función asociada al evento detectado
Actualización de la interfaz
La página responde según la lógica programada
Buenas Prácticas con Eventos

Optimización
Usar delegación de eventos cuando sea posible
Organización
Separar la lógica de los eventos del resto del código
Depuración
Incluir manejo de errores en los listeners
Limpieza
Eliminar listeners cuando ya no sean necesarios
Objeto Evento
Cualquier actividad producida por un usuario se denomina Eventos: pulsar una tecla, mover el ratón, hacer scroll, pulsar un botón… Y todos los eventos pueden ser escuchados para lanzar acciones. En otras palabras, podemos detectar y vincular cada evento a una funcionalidad de JavaScript. ¡Incluso extraer información!
Propagación de Eventos
1
Fase de captura
El evento desciende desde el documento hasta el elemento objetivo
2
Fase objetivo
El evento llega al elemento donde se originó
3
Fase de burbujeo
El evento asciende desde el elemento objetivo hasta el documento
El tercer parámetro de addEventListener (booleano) indica si debe escuchar todo el árbol del DOM (cuando esta true) o solo escuchar la etiqueta (cuando esta false).
Resumen de Eventos en JavaScript
Cualquier actividad producida por un usuario se denomina Eventos: pulsar una tecla, mover el ratón, hacer scroll, pulsar un botón… Y todos los eventos pueden ser escuchados para lanzar acciones. En otras palabras, podemos detectar y vincular cada evento a una funcionalidad de JavaScript. ¡Incluso extraer información!

funciones-en-javascript-4a5nic2.gamma.site

Funciones en JavaScript

Hay un momento, en todo desarrollo, que acabas reutilizando el mismo código una y otra vez. Puede ser que esté formado por un par de líneas o cientos de ellas. A nivel de organización es más práctico crear un grupo capaz de ser invocado que ir copiando y pegando en diferentes sitios. Además que para

condicionales-en-javascr-jan84fq.gamma.site

Condicionales en JavaScript

Los condicionales nos permiten tomar decisiones, crear ramificaciones en la lógica del software que estamos construyendo: ¿bajo que condiciones debo ejecutar las instrucciones? ¿qué hago si no se cumple mis requisitios?

eventos-en-javascript-bd42iyz.gamma.site

Eventos en JavaScript

Cualquier actividad producida por un usuario se denomina Eventos: pulsar una tecla, mover el ratón, hacer scroll, pulsar un botón… Y todos los eventos pueden ser escuchados para lanzar acciones. En otras palabras, podemos detectar y vincular cada evento a una funcionalidad de JavaScript. ¡Incluso ex

guia-variables-js-ll55uff.gamma.site

Guía Completa: var, let y const en JavaScript

Descubre las diferencias clave entre las declaraciones de variables en JavaScript y aprende a utilizarlas correctamente en tus proyectos.

operadores-logicos-js-td9k6zq.gamma.site

Operadores Lógicos en JavaScript

Aprende a utilizar los operadores lógicos en JavaScript para evaluar expresiones y crear condiciones complejas. Comenzar a aprender

guia-pruebas-usabilidad-9w1v30d.gamma.site

Guía sobre pruebas de usabilidad de sitios web

Un diseño web atractivo y una experiencia de usuario agradable son elementos vitales para el éxito de un sitio web. Descubre cómo evaluar y mejorar la usabilidad de tu página web para aumentar la credibilidad y la tasa de conversión.

validacion-formularios-gbij6ey.gamma.site

Validación de Formularios en el Lado del Cliente

Antes de enviar datos al servidor, es importante asegurarse de que se completan todos los controles de formulario requeridos, y en el formato correcto. Esto se denomina validación de formulario en el lado del cliente y ayuda a garantizar que los datos que se envían coinciden con los requisitos estab

¿Dudas o algo que quieras comentarme?
Estoy aquí para ayudarte a seguir mejorando y aprendiendo.
Si necesitas que te ayude con tu proyecto o clases más específicas escríbeme