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" value="Aprétame">

<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" placeholder="Escribe y pulsa Enter cuando acabes">

<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);

</script>

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 5-3 5-4

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿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.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

Escribe el primer comentario