Un evento es una señal del navegador de que algo ha sucedido en una página web. Los eventos se utilizan para responder a las acciones del usuario y ejecutar el código asociado a un evento concreto.

Hay muchos tipos de eventos:

• de mouse, de teclado.
• de elementos de formulario
• de carga de imágenes
• de portapapeles
• de cambio de etapa de animación CSS o de transición.
• de cambio de tamaño de la ventana y muchos otros.

Una acción puede desencadenar varios eventos. Por ejemplo, un clic provoca primero mousedown y luego mouseup y click. En los casos en los que una misma acción genera varios eventos, su orden es fijo. Es decir, los manejadores serán llamados en el orden mousedown → mouseup → click.

Para que un elemento responda a las acciones del usuario, necesita añadir un receptor de eventos (manejador). Es decir, una función que será llamada en cuanto se produzca el evento.

Añade un receptor de eventos al elemento.

element.addEventListener(event, handler, options);

• event - Nombre del evento, cadena, por ejemplo "click".
• handler - Función de devolución de llamada que será llamada cuando ocurra el evento.
• options - Objeto de parámetro opcional con ajustes avanzados.

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

button.addEventListener("click", () => {
  console.log("Button was clicked");
});

Es posible (y deseable) utilizar una función separada para la devolución de llamada y pasar una referencia a ella. Una función con nombre aumenta la legibilidad del código.

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

function  handleClick() {
  console.log("Button was clicked");
};

button.addEventListener("click", handleClick);

Es una forma de quitar un evento que antes habías agregado con addEventListener.

element.removeEventListener(event, handler, options);

Ejemplo:

function saludar() {
  console.log("Hola Mundo!");
}

boton.addEventListener("click", saludar);

// Para quitarlo:
boton.removeEventListener("click", saludar);

1. Usaste la misma función (no una función anónima).
2. Es el mismo elemento.
3. Es el mismo evento

✖ Esto NO se puede quitar:

boton.addEventListener("click", function () {
  console.log("Hola");
});

siguiente: Objeto del evento