Eventos en JavaScript

Los eventos en JavaScript son acciones que el usuario realiza en una página web, como clics en botones, pulsaciones de teclas o movimientos del ratón. Al detectar estos eventos, puedes ejecutar código específico para crear una experiencia interactiva y dinámica para tus usuarios.

¿Qué es un evento en JavaScript?

Un evento es una señal que indica que algo ha sucedido en la página web. Los eventos pueden ser generados por el usuario (como clics o pulsaciones de teclas), por el navegador (como carga de la página o cambios de tamaño) o por otros elementos de la página (como animaciones).

¿Cómo detectar eventos?

Existen dos formas principales de detectar eventos:

1. Atributos HTML:

Puedes usar atributos HTML específicos para indicar qué código se debe ejecutar cuando se produce un evento. Por ejemplo, el atributo onclick se usa para ejecutar código cuando se hace clic en un elemento.


<button onclick="alert('Hola, mundo!')">Click aquí</button>

Lenguaje del código: HTML, XML (xml)

2. addEventListener():

El método addEventListener() te permite agregar un «escuchador» a un elemento para que se ejecute una función cuando se produce un evento específico.


const button = document.querySelector("button");

button.addEventListener("click", function() {
  alert("Hola, mundo!");
});

Lenguaje del código: HTML, XML (xml)

Tipos de eventos comunes:

  • click: Se produce cuando se hace clic en un elemento.
  • mouseover: Se produce cuando el cursor se coloca sobre un elemento.
  • mouseout: Se produce cuando el cursor se retira de un elemento.
  • keydown: Se produce cuando se presiona una tecla.
  • keyup: Se produce cuando se suelta una tecla.
  • submit: Se produce cuando se envía un formulario.
  • load: Se produce cuando se carga la página.

Ejemplos prácticos:

1. Cambiar el color de un elemento al hacer clic:


<button id="button">Cambiar color</button>

<script>
const button = document.getElementById("button");

button.addEventListener("click", function() {
  button.style.backgroundColor = "red";
});
</script>

Lenguaje del código: HTML, XML (xml)

2. Mostrar un mensaje al presionar una tecla:


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

<script>
const input = document.getElementById("input");

input.addEventListener("keydown", function(event) {
  if (event.key === "Enter") {
    alert("Has presionado Enter!");
  }
});
</script>

Lenguaje del código: HTML, XML (xml)

Conclusión:

Los eventos son esenciales para crear interfaces de usuario interactivas y dinámicas. Al dominar la detección y el manejo de eventos, puedes crear páginas web que respondan a las acciones del usuario y brinden una experiencia más atractiva y personalizada.