Lección 5: Eventos

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!

Entre los eventos más importantes podemos encontrar:

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

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

La función addEventListener contiene 3 parámetros de entrada:

1. Nombre de evento, en nuestro ejemplo ha sido submit.
2. Función que se ejecutará cuando se detecte el evento. Puede ser una función anónima o la referencia.
3. Boleano para indicar si debe escuchar todo el árbol del DOM (cuando esta true) o solo escuchar la etiqueta (cuando esta false).

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.

Clic sobre botón

A continuación puede ver que al hacer clic sobre un botón imprime por consola funciono.

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

Apretar una tecla

En este ejemplo, cuando se pulse la tecla Enter, se mostrará una alerta con el texto Me has pulsado enter.

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.

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

Scroll

Ejemplo donde se imprime por consola la posición del scroll cada vez que se haga 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.

<h1>¿Cómo se suele tomar el café?</h1>
<p>Las formas más populares de tomarlo son negro o solo y con leche (con o sin azúcar); también se le suele añadir crema o nata, leche condensada, chocolate o algún licor, es decir, dependiendo de la receta hay diversas formas de prepararlo. Se sirve habitualmente caliente, pero también se toma frío o con hielo. En España, Portugal y Paraguay es frecuente el consumo de café torrado o torrefacto, es decir, tostado en presencia de azúcar.</p>

¿Me ayudas?

No te sientas obligado a realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

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

Publicar ¡Publicado! ¡Ups! Algo ha fallado, ¿Reintentamos? Enviando...

Escribe el primer comentario