Guiavascript-Eventos

Eventos

Nota

Los eventos son interacciones del usuario con el documento HTML, como hacer clic en un botón o pasar el cursor por encima de un elemento. Los eventos se pueden utilizar para controlar el comportamiento de la página web en respuesta a estas interacciones.

Existen muchos eventos, aquí veremos algunos de los más usados.

Eventos en JavaScript

Añadir eventos

Podemos añadir eventos a los elementos usando .addEventListener("evento",función). Donde el primer argumento es el tipo de evento y el segundo es la función, que deseamos realizar una vez se ejecute el evento.

Eventos del mouse

Evento click

Podemos agregar un evento para que escuche cuando se produzca un clic sobre el elemento seleccionado. Usando el el evento "click"

<!--HTML-->
<button id='hello'>Saludar🖐️</button>

  const helloBtn = document.getElementById("hello");
// función saludar
const saludar = () => (helloBtn.innerText = "HOLA 🖐️");
helloBtn.addEventListener("click", saludar);

Evento doble click

Podemos agregar un evento para que escuche cuando se produzca un clic doble sobre el elemento seleccionado. Usando el el evento "dblclick"

<!--HTML-->
<button id='btn'>Haz un click doble</button>

const hotBtn = document.getElementById("btn");
const hot = () => (hotBtn.innerText = "Tranquilo vas a quemar el botón😳🔥");
hotBtn.addEventListener("dblclick", hot);

Evento mouseenter

Podemos agregar un evento para que escuche cuando el mouse este sobre el elemento seleccionado. Usando el el evento "mouseenter"

<!--HTML-->
<p id="p" >Pon el mouse sobre mi</p>

const p = document.getElementById("p");
const surprise = () => (p.innerText = "Hola 😏");
p.addEventListener("mouseenter", surprise);;

Evento click derecho

Podemos agregar un evento para que escuche cuando el mouse este sobre el elemento seleccionado. Usando el el evento "mouseenter"

<!--HTML-->
<p id="p" >Pon el mouse sobre mi</p>

const p = document.getElementById("act");
const surprise = (e) => {e.preventDefault(); p.innerText = "Click derecho activado."}
p.addEventListener("contextmenu", surprise);

Para este caso también usamose.preventDefault();, que es para eliminar el comportamiento por defecto del navegador, que en este casos seria mostrar el menu habitual del navegador. Y por si te preguntas la e que se le pasa en la función corresponde al evento.

Eventos del Teclado

Evento keydown

Podemos agregar un evento para que escuche cuando se presione una tecla. Usando el el evento "keydown"

<!--HTML-->
<p id="key" >Presiona una tecla.</p>

const p = document.getElementById("key");
const change = (e) => (p.innerText = e.key);
//Usamos document para leer todo el documento (la pagina.) 
document.addEventListener("keydown", change);

Evento keyup

Podemos agregar un evento para que escuche cuando se suelte una tecla. Usando el el evento "keyup"

<!--HTML-->
<p id="keyup" >Mantén presionada una tecla y luego suelta.</p>

const p = document.getElementById("keyup");
const change = (e) => (p.innerText = e.key); 
document.addEventListener("keyup", change);

Eventos de Pantalla

Evento resize

Podemos agregar un evento para que escuche cuando se cambie el tamaño de la pantalla. Usando el el evento "resize" Y refriéndose a "window" si desear medir toda la pagina.

<!--HTML-->
<p id="key" >Altura de la ventana: <span id="height"></span></p>
<p id="key" >Ancho de la ventana: <span id="width"></span></p>

const h = document.querySelector("#height");
const w = document.querySelector("#width");
const change = () => {
// Accedemos al tamaño de la ventana usando el objeto global window y su valor en alto y ancho
  h.textContent = window.innerHeight; 
  w.textContent = window.innerWidth;
};
window.addEventListener("resize", change);

La magia del evento no es medir el ancho y alto, ya que eso es algo que se puede hacer sin ejecutar ningún evento, el objetivo es que esos valores se actualicen cada vez que cambie el tamaño

Evento scroll

Podemos agregar un evento para que escuche cuando se hace scroll en la pagina. Usando el el evento "scroll" Y pasandole como argumento nuestra función.

<!--HTML-->
<section class="flex center f-col br-secondary">
<h2>Evento Scroll</h2>
<p>Haz un scroll y después espera 1 seg <span id="scroll">Scrolleando...</span></p> </section>

const scroll = document.querySelector("#scroll");
const changeScroll = () => {
  scroll.textContent = "Scrolleando...";
  // Color temporal al hacer scroll
  scroll.style.color = "lightblue";
  // Volver al color original tras 1 segundo
  setTimeout(() => {
    scroll.style.color = "#fff";
  }, 1000);
};
window.addEventListener("scroll", changeScroll);

Evento load

Podemos agregar un evento para que escuche cuando se cambie el tamaño de la pantalla. Usando el el evento "load" y pasando como argumento nuestra función.

<!--HTML-->
<section class="flex center f-col br-secondary" id="load">Recarga la pagina y observa el color de fondo</section>

const body = document.querySelector("#load");
const change = () => {
 // Color temporal al recargar
 body.style.backgroundColor = "#182f4a";
 // Volver al color original tras 2 segundo
 setTimeout(() => {
 body.style.backgroundColor = "#2d2d2d";
 },2000);
};
window.addEventListener("load", change);