Skip to content

Lista de Eventos ​

1. Eventos de Mouse ​

Nombre del Evento JavaScriptAtributo HTMLTipoDescripciónDisponible en fromEvent
clickonclickMouseEventCuando se hace clic en un elemento✅
dblclickondblclickMouseEventCuando se hace doble clic en un elemento✅
mousedownonmousedownMouseEventCuando se presiona el botón del mouse✅
mouseuponmouseupMouseEventCuando se suelta el botón del mouse✅
mousemoveonmousemoveMouseEventCuando se mueve el mouse✅
mouseoveronmouseoverMouseEventCuando el mouse está sobre un elemento✅
mouseoutonmouseoutMouseEventCuando el mouse sale del elemento✅
mouseenteronmouseenterMouseEventCuando el mouse entra en un elemento (sin burbujeo)✅
mouseleaveonmouseleaveMouseEventCuando el mouse sale del elemento (sin burbujeo)✅
contextmenuoncontextmenuMouseEventCuando se abre el menú de clic derecho✅

2. Eventos de Puntero ​

Nombre del Evento JavaScriptAtributo HTMLTipoDescripciónDisponible en fromEvent
pointerdownonpointerdownPointerEventCuando se presiona el puntero (táctil, pluma, mouse)✅
pointeruponpointerupPointerEventCuando se suelta el puntero✅
pointermoveonpointermovePointerEventCuando se mueve el puntero✅
pointeroveronpointeroverPointerEventCuando el puntero está sobre un elemento✅
pointeroutonpointeroutPointerEventCuando el puntero sale del elemento✅
pointerenteronpointerenterPointerEventCuando el puntero entra en un elemento (sin burbujeo)✅
pointerleaveonpointerleavePointerEventCuando el puntero sale del elemento (sin burbujeo)✅
pointercancelonpointercancelPointerEventCuando se cancela la operación del puntero✅
gotpointercaptureongotpointercapturePointerEventCuando se adquiere la captura del puntero✅
lostpointercaptureonlostpointercapturePointerEventCuando se pierde la captura del puntero✅

3. Eventos Táctiles ​

Nombre del Evento JavaScriptAtributo HTMLTipoDescripciónDisponible en fromEvent
touchstartontouchstartTouchEventCuando se toca la pantalla✅
touchmoveontouchmoveTouchEventCuando se mueve el dedo tocado✅
touchendontouchendTouchEventCuando termina un toque✅
touchcancelontouchcancelTouchEventCuando se cancela un toque✅

4. Eventos de Teclado ​

Nombre del Evento JavaScriptAtributo HTMLTipoDescripciónDisponible en fromEvent
keydownonkeydownKeyboardEventCuando se presiona una tecla✅
keypressonkeypressKeyboardEvent⚠️ Obsoleto - Use keydown en su lugar✅
keyuponkeyupKeyboardEventCuando se suelta una tecla✅

Sobre el evento keypress

El evento keypress ha sido obsoleto por los estándares web.

Razones para la obsolescencia:

  • Soporte de internacionalización insuficiente (problemas con entrada japonesa, etc.)
  • Comportamiento inestable en combinación con teclas modificadoras (Shift, Ctrl, Alt)
  • Soporte limitado para dispositivos móviles

Alternativas recomendadas:

typescript
// ❌ Obsoleto
fromEvent(input, 'keypress')
  .subscribe(event => console.log(event));

// ✅ Recomendado: Use keydown
fromEvent<KeyboardEvent>(input, 'keydown')
  .subscribe(event => console.log(event.key));

Eventos recomendados por caso de uso:

  • Detección de entrada de texto: evento input (recomendado)
  • Detección de pulsación de tecla: evento keydown
  • Detección de liberación de tecla: evento keyup

5. Eventos Relacionados con Enfoque ​

Nombre del Evento JavaScriptAtributo HTMLTipoDescripciónDisponible en fromEvent
focusonfocusFocusEventCuando un elemento recibe foco✅
bluronblurFocusEventCuando un elemento pierde foco✅
focusinonfocusinFocusEventCuando un elemento o elemento hijo recibe foco✅
focusoutonfocusoutFocusEventCuando un elemento o elemento hijo pierde foco✅

6. Eventos de Formulario ​

Nombre del Evento JavaScriptAtributo HTMLTipoDescripciónDisponible en fromEvent
changeonchangeEventCuando se cambia el contenido de entrada✅
inputoninputInputEventCuando se cambia el valor de un campo de entrada✅
submitonsubmitSubmitEventCuando se envía el formulario✅
resetonresetEventCuando se reinicia el formulario✅
selectonselectEventCuando se selecciona texto✅

7. Eventos de Arrastrar y Soltar ​

Nombre del Evento JavaScriptAtributo HTMLTipoDescripciónDisponible en fromEvent
dragondragDragEventMientras se arrastra el elemento✅
dragstartondragstartDragEventCuando se inicia un arrastre✅
dragendondragendDragEventCuando termina el arrastre✅
dragoverondragoverDragEventCuando el elemento arrastrado está sobre otro elemento✅
dragenterondragenterDragEventCuando el elemento arrastrado entra en el objetivo✅
dragleaveondragleaveDragEventCuando el elemento arrastrado sale del objetivo✅
dropondropDragEventCuando se suelta el elemento arrastrado✅

8. Eventos de Ventana y Documento ​

Nombre del Evento JavaScriptAtributo HTMLTipoDescripciónDisponible en fromEvent
loadonloadEventCuando la página está completamente cargada✅
resizeonresizeUIEventCuando se redimensiona la ventana✅
scrollonscrollEventCuando se desplaza una página✅
unloadonunloadEventCuando se cierra la página❌
beforeunloadonbeforeunloadBeforeUnloadEventJusto antes de cerrar la página❌
erroronerrorErrorEventCuando ocurre un error✅
visibilitychangeonvisibilitychangeEventCuando cambia el estado de visualización de la página (ej., cambio de pestañas)✅
fullscreenchangeonfullscreenchangeEventCuando cambia el estado de pantalla completa✅

9. Eventos de Medios ​

Nombre del Evento JavaScriptAtributo HTMLTipoDescripciónDisponible en fromEvent
playonplayEventCuando comienza la reproducción de medios✅
pauseonpauseEventCuando se pausa la reproducción de medios✅
endedonendedEventCuando termina la reproducción de medios✅
volumechangeonvolumechangeEventCuando se cambia el volumen de medios✅
seekingonseekingEventCuando se inicia la búsqueda de medios✅
seekedonseekedEventCuando se completa la búsqueda de medios✅
timeupdateontimeupdateEventCuando se actualiza el tiempo de reproducción de medios✅

10. Eventos de Animación y Transición ​

Nombre del Evento JavaScriptAtributo HTMLTipoDescripciónDisponible en fromEvent
animationstartonanimationstartAnimationEventCuando comienza una animación✅
animationendonanimationendAnimationEventCuando termina la animación✅
animationiterationonanimationiterationAnimationEventCuando se repite la animación✅
transitionstartontransitionstartTransitionEventCuando comienza una transición CSS✅
transitionendontransitionendTransitionEventCuando termina una transición CSS✅

11. Otros Eventos ​

Nombre del Evento JavaScriptAtributo HTMLTipoDescripciónDisponible en fromEvent
wheelonwheelWheelEventCuando se gira la rueda del mouse✅
abortonabortUIEventCuando se interrumpe la carga de recursos✅
hashchangeonhashchangeHashChangeEventCuando se cambia el hash de URL (ej. #section1)✅
messageonmessageMessageEventCuando se recibe un mensaje de Web Workers o iframes❌
onlineononlineEventCuando la red vuelve a estar en línea✅
offlineonofflineEventCuando la red se desconecta✅
popstateonpopstatePopStateEventCuando ocurre un cambio de estado debido a history.pushState o history.back❌
storageonstorageStorageEventCuando se cambia localStorage o sessionStorage❌
languagechangeonlanguagechangeEventCuando se cambia la configuración de idioma (cambio de configuración del navegador)❌

Publicado bajo licencia CC-BY-4.0.