Lección 5: Eventos

Cualquier acción que haga un usuario se denomina Evento: un botón del teclado, se ha movido el ratón, el scroll se ha cambiado de posición, redimensiona el navegador… y cuando esto ocurre nosotros podemos lanzar una función. Incluso extraer información.

Los eventos más importantes.

  • load: Se ha terminado de cargar la página.
  • focus: Un input recibe el foco.
  • blur: Un input pierde el foco.
  • animationstart: Empieza una animación.
  • animationend: Termina una animación.
  • transitionstart: Empieza una transición.
  • transitionend: Termina una transición.
  • submit: Se envía un formulario.
  • scroll: Se mueve el scroll.
  • keydown: Se pulsa una tecla del teclado.
  • click: Se hace clic izquierdo con el 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.

Lista completa la puedes encontrar en la documentación de Mozilla Developer. Veamos algunos ejemplos.

Clic

Ejemplo al hacer click sobre un botón.

<input id="boton" type="button">

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

  // Evento
  boton.addEventListener('click', function(evento) {
    console.log('funciono');
  }, false);
</script>

Teclado

Ejemplo al pulsar la tecla Enter.

<input id="campo" type="text">

<script>
 // Variables
 const campo = document.querySelector('#campo');

 // Functiones
 function instrucciones(evento) {
     if(evento.code === 'Enter') {
	 alert('Me has pulsado enter');
     }
 }

 // Eventos
 campo.addEventListener('keydown', instrucciones);

Scroll

Ejemplo donde imprimo la posición del scroll.

document.addEventListener('scroll', function(evento) {
  const ultimaPosicion = window.scrollY;
  console.log(ultimaPosicion)
});
// 123 (distancia en píxeles)

5-1 5-2

¿Te ayudo?

  • 1 café: ¡Gracias por el apoyo! Te ayudo a que esta web siga estando online pagando los servidores.
  • 2 cafés: Respondo a una duda en los comentarios.
  • 4 cafés: Te corrijo una actividad y te envío feedback.
Comprame un café

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario