EVENTOS EN JAVASCRIPT: CÓMO FUNCIONAN Y EJEMPLOS

Los eventos en JavaScript son acciones o sucesos que ocurren en el navegador, como hacer clic en un botón, mover el ratón, presionar una tecla, cargar una página, etc., que pueden ser detectados y manejados mediante funciones conocidas como controladores de eventos (event handlers)..

Eventos más comunes

  • Eventos del ratón
    • click
    • dblclick
    • mousedown
    • mouseup
    • mousemove
    • mouseover
    • mouseout
    • mouseenter
    • mouseleave
  • Eventos del teclado
    • keydown
    • keypress
    • keyup
  • Eventos del formulario
    • submit
    • change
    • input
    • focus
    • blur
  • Eventos del ventana o nevegador
    • load
    • resize
    • scroll
    • unload
  • Eventos del arrastrar
    • dragstart
    • drag
    • dragend
    • drop
La mejor manera de agregrar eventos es usar addEventListener que es un método de JavaScript para asociar una función (llamada event handler o listener) a un evento específico en un elemento del DOM (como un botón, un div, un input, etc.).
La sintaxis es:

elemento.addEventListener(evento, function, [opciones]);
Donde:
  1. evento (string): El nombre del evento sin el prefijo on. Ejemplos: 'click', 'keydown', 'mouseover', 'submit', 'load', etc.
  2. función (function): La función que se ejecutará cuando ocurra el evento. Puede ser una función nombrada o anónima.
  3. opciones (opcional, objeto): Configuraciones avanzadas como:capture: true/false → Usa fase de captura en lugar de burbujeo. once: true → El listener se ejecuta solo una vez y se elimina.
    4. passive: true → Mejora el rendimiento en eventos de scroll/touch (no se puede usar preventDefault()).
Ejemplo:

<button id="miBoton">Haz clic aquí</button>
<script>
  const boton = document.getElementById('miBoton');

  boton.addEventListener('click', function() {
    alert('¡Botón clickeado!');
  });
</script>