¿Qué tipos de eventos (eventos) existen?

Existen muchos tipos de eventos, pero los más comunes se pueden agrupar en categorías:

• Eventos de interfaz de usuario:

  • click: Clic del botón del ratón sobre un elemento.
  • dblclick: Doble clic del botón del ratón sobre un elemento.
  • mousedown: Presionar el botón del ratón (antes de soltarlo).
  • mouseup: Soltar el botón del ratón.
  • mousemove: Movimiento del puntero del ratón sobre un elemento.
  • mouseover: Poner el puntero del ratón sobre un elemento.
  • mouseout: Quitar el puntero del ratón de un elemento.
  • mouseenter: Poner el puntero del ratón sobre un elemento (no se propaga desde los elementos hijos).
  • mouseleave: Quitar el puntero del ratón de un elemento (no se propaga desde los elementos hijos).
  • contextmenu: Mostrar el menú contextual con el botón derecho del ratón.

• Eventos de teclado:

  • keydown: Presionar una tecla (antes de soltarla).
  • keyup: Soltar una tecla.
  • keypress: Presionar y mantener una tecla, generando datos de entrada de caracteres. (Obsoleto, se recomienda usar keydown y keyup).

• Eventos de formulario:

  • submit: Enviar un formulario.
  • change: Cambiar el valor de un elemento de formulario (por ejemplo, <input>, <select>, <textarea>).
  • input: Cambiar el valor de un elemento de formulario cuando su contenido cambia de forma interactiva.
  • focus: El elemento recibe foco.
  • blur: El elemento pierde foco.
  • cut: Cortar contenido.
  • copy: Copiar contenido.
  • paste: Pegar contenido.

• Eventos de carga y errores:

  • load: Finalizar la carga de un recurso (por ejemplo, imagen, script, página).
  • unload: Salir de la página.
  • beforeunload: Intentar abandonar la página (permite mostrar un diálogo de confirmación).
  • error: Ocurrió un error al cargar un recurso o ejecutar un script.

• Eventos de foco (FocusEvent):

  • focusin: El elemento o cualquier elemento hijo recibe foco.
  • focusout: El elemento o cualquier elemento hijo pierde foco.

• Eventos de desplazamiento:

  • scroll: Desplazar un elemento.

• Eventos de toque (para dispositivos táctiles):

  • touchstart: El dedo toca la pantalla.
  • touchend: El dedo se levanta de la pantalla.
  • touchmove: El dedo se mueve por la pantalla.
  • touchcancel: Evento de toque interrumpido (por ejemplo, por llamar al menú del sistema).

• Eventos de arrastrar y soltar (Drag and Drop):

  • dragstart: Comienzo de arrastrar.
  • drag: El elemento se está arrastrando.
  • dragend: Fin de arrastrar.
  • dragenter: El elemento se ha arrastrado sobre una zona de soltado válida.
  • dragleave: El elemento ha sido arrastrado fuera de una zona de soltado válida.
  • dragover: El elemento se ha arrastrado sobre una zona de soltado válida (requiere cancelar el comportamiento predeterminado para permitir la soltura).
  • drop: El elemento ha sido soltado en una zona de soltado válida.

• Eventos de historia del navegador:

  • popstate: Cambio en la entrada activa de la historia al navegar (por ejemplo, al hacer clic en "Atrás/Adelante").

• Eventos de cambio de tamaño de ventana:

  • resize: Cambio en el tamaño de la ventana del navegador.

Esta no es una lista exhaustiva, pero cubre los tipos de eventos más frecuentes e importantes en el desarrollo web. Comprender su propósito y comportamiento es clave para crear aplicaciones web interactivas.