Los eventos DOM (modelo de objetos de documento) son una señal de que algo ha ocurrido, o está ocurriendo, y pueden ser activados por interacciones del usuario o por el navegador. [1] Los lenguajes de scripting del lado del cliente como JavaScript , JScript , ECMAScript , VBScript y Java pueden registrar varios controladores de eventos u oyentes en los nodos de elementos dentro de un árbol DOM , como en documentos HTML , XHTML , XUL y SVG .
Ejemplos de eventos DOM:
- Cuando un usuario hace clic con el mouse
- Cuando se ha cargado una página web
- Cuando se ha cargado una imagen
- Cuando el mouse se mueve sobre un elemento
- Cuando se cambia un campo de entrada
- Cuando se envía un formulario HTML
- Cuando un usuario presiona una tecla [2]
Históricamente, como DOM, los modelos de eventos utilizados por varios navegadores web tenían algunas diferencias significativas. Esto provocó problemas de compatibilidad. Para combatir esto, el modelo de eventos fue estandarizado por el Consorcio World Wide Web (W3C) en DOM Nivel 2.
Eventos
Eventos HTML
Eventos comunes
Existe una gran colección de eventos que pueden ser generados por la mayoría de los nodos de elementos:
- Eventos de mouse . [3] [4]
- Eventos de teclado .
- Eventos de marco / objeto HTML.
- Eventos de formulario HTML.
- Eventos de la interfaz de usuario.
- Eventos de mutación (notificación de cualquier cambio en la estructura de un documento).
- Eventos de progreso [5] (utilizado por XMLHttpRequest , API de archivo, [6] ).
Tenga en cuenta que la clasificación de eventos anterior no es exactamente la misma que la clasificación del W3C.
Categoría | Tipo | Atributo | Descripción | Burbujas | Cancelable |
---|---|---|---|---|---|
Ratón | hacer clic | al hacer clic | Se activa cuando se hace clic en el botón del dispositivo señalador sobre un elemento. Un clic se define como un mouse hacia abajo y hacia arriba sobre la misma ubicación de la pantalla. La secuencia de estos eventos es:
| sí | sí |
doble clic | ondblclick | Se dispara cuando se hace doble clic en el botón del dispositivo señalador sobre un elemento | sí | sí | |
ratón hacia abajo | onmousedown | Se dispara cuando se presiona el botón del dispositivo señalador sobre un elemento | sí | sí | |
mouseup | onmouseup | Se dispara cuando se suelta el botón del dispositivo señalador sobre un elemento | sí | sí | |
ratón sobre | el ratón por encima | Se dispara cuando el dispositivo señalador se mueve sobre un elemento | sí | sí | |
mousemove [7] | onmousemove | Se dispara cuando el dispositivo señalador se mueve mientras está sobre un elemento | sí | sí | |
mouseout | onmouseout | Se dispara cuando el dispositivo señalador se aleja de un elemento | sí | sí | |
dragstart | ondragstart | Se dispara sobre un elemento cuando se inicia un arrastre. | sí | sí | |
arrastrar | ondrag | Este evento se dispara en la fuente del arrastre, es decir, el elemento donde se dispara dragstart, durante la operación de arrastre. | sí | sí | |
dragenter | ondragenter | Se activa cuando el mouse se mueve por primera vez sobre un elemento mientras se produce un arrastre. | sí | sí | |
arrastrar | ondragleave | Este evento se activa cuando el mouse abandona un elemento mientras se produce un arrastre. | sí | No | |
dragover | ondragover | Este evento se activa cuando el mouse se mueve sobre un elemento cuando se produce un arrastre. | sí | sí | |
soltar | ondrop | El evento de caída se dispara en el elemento donde se produce la caída al final de la operación de arrastre. | sí | sí | |
dragend | ondragend | La fuente del arrastre recibirá un evento dragend cuando se complete la operación de arrastre, ya sea que haya tenido éxito o no. | sí | No | |
Teclado | keydown | onkeydown | Se dispara antes de presionar una tecla, cuando se presiona una tecla del teclado. | sí | sí |
pulsación de tecla | onkeypress | Se dispara después de presionar una tecla, cuando se presiona una tecla del teclado. | sí | sí | |
tecla Arriba | onkeyup | Se dispara cuando se suelta una tecla del teclado | sí | sí | |
Marco / objeto HTML | carga | onload | Se activa cuando el agente de usuario termina de cargar todo el contenido de un documento, incluidas ventanas, marcos, objetos e imágenes. Para los elementos, se dispara cuando el elemento de destino y todo su contenido ha terminado de cargarse | No | No |
descargar | descargar | Se activa cuando el agente de usuario elimina todo el contenido de una ventana o marco En el caso de los elementos, se activa cuando se ha eliminado el elemento de destino o parte de su contenido. | No | No | |
abortar | onabort | Se dispara cuando se detiene la carga de un objeto / imagen antes de que se cargue por completo | sí | No | |
error | onerror | Se dispara cuando un objeto / imagen / marco no se puede cargar correctamente | sí | No | |
cambiar el tamaño | onresize | Se activa cuando se cambia el tamaño de la vista de un documento | sí | No | |
Desplazarse | onscroll | Se activa cuando se desplaza una vista de elemento o documento | No, excepto que un evento de desplazamiento en el documento debe aparecer en la ventana [8] | No | |
Formulario HTML | Seleccione | onselect | Se activa cuando un usuario selecciona algún texto en un campo de texto , incluida la entrada y el área de texto | sí | No |
cambio | onchange | Se activa cuando un control pierde el foco de entrada y su valor se ha modificado desde que ganó el foco | sí | No | |
enviar | onsubmit | Se activa cuando se envía un formulario | sí | sí | |
Reiniciar | reiniciar | Se dispara cuando se restablece un formulario | sí | No | |
enfocar | enfocado | Se dispara cuando un elemento recibe el enfoque a través del dispositivo señalador o mediante la navegación por pestañas | No | No | |
difuminar | en la falta de definición | Se dispara cuando un elemento pierde el enfoque a través del dispositivo señalador o mediante la navegación con pestañas | No | No | |
Interfaz de usuario | concéntrate en | (ninguno) | Similar al evento de enfoque HTML, pero se puede aplicar a cualquier elemento enfocable | sí | No |
focusout | (ninguno) | Similar al evento de desenfoque HTML, pero se puede aplicar a cualquier elemento enfocable | sí | No | |
DOMActivate | (ninguno) | Similar al evento de comando XUL. Se dispara cuando se activa un elemento, por ejemplo, mediante un clic del mouse o al presionar una tecla. | sí | sí | |
Mutación | DOMSubtreeModified | (ninguno) | Se dispara cuando se modifica el subárbol | sí | No |
DOMNodeInserted | (ninguno) | Se activa cuando un nodo se ha agregado como hijo de otro nodo | sí | No | |
DOMNodeRemoved | (ninguno) | Se activa cuando un nodo se ha eliminado de un árbol DOM | sí | No | |
DOMNodeRemovedFromDocument | (ninguno) | Se activa cuando se elimina un nodo de un documento | No | No | |
DOMNodeInsertedIntoDocument | (ninguno) | Se activa cuando se inserta un nodo en un documento | No | No | |
DOMAttrModified | (ninguno) | Se activa cuando se modifica un atributo | sí | No | |
DOMCharacterDataModified | (ninguno) | Se dispara cuando se modifican los datos del personaje. | sí | No | |
Progreso | loadstart | (ninguno) | Ha comenzado el progreso. | No | No |
Progreso | (ninguno) | En curso. Después de que se haya enviado loadstart. | No | No | |
error | (ninguno) | La progresión falló. Después de que se haya enviado el último progreso, o después de que se haya enviado loadstart si no se ha enviado el progreso. | No | No | |
abortar | (ninguno) | Se termina la progresión. Después de que se haya enviado el último progreso, o después de que se haya enviado loadstart si no se ha enviado el progreso. | No | No | |
carga | (ninguno) | La progresión es exitosa. Después de que se haya enviado el último progreso, o después de que se haya enviado loadstart si no se ha enviado el progreso. | No | No | |
cargar | (ninguno) | El progreso se ha detenido. Después de que se haya enviado uno de error, aborto o carga. | No | No |
Tenga en cuenta que los eventos cuyos nombres comienzan con "DOM" actualmente no están bien admitidos y, por esta y otras razones de rendimiento, el W3C los desaprueba en DOM Nivel 3. Mozilla y Opera admiten DOMAttrModified , DOMNodeInserted , DOMNodeRemoved y DOMCharacterDataModified . Chrome y Safari admiten estos eventos, excepto DOMAttrModified .
Toque eventos
Navegadores web que se ejecutan en contacto habilitado dispositivos, como los de Apple iOS y Google de Android , generan eventos adicionales. [9] : §5.3
Categoría | Tipo | Atributo | Descripción | Burbujas | Cancelable |
---|---|---|---|---|---|
Tocar | touchstart | Se dispara cuando se coloca un dedo sobre la superficie / pantalla táctil. | sí | sí | |
tocar | Se dispara cuando se quita un dedo de la superficie / pantalla táctil. | sí | sí | ||
tocar | Se dispara cuando un dedo ya colocado en la pantalla se mueve por la pantalla. | sí | sí | ||
tocador | Se activa cuando un punto de contacto se mueve hacia el área interactiva definida por un elemento DOM. | sí | sí | ||
touchleave | Se dispara cuando un punto de contacto se mueve fuera del área interactiva definida por un elemento DOM. | sí | sí | ||
touchcancel | Un agente de usuario debe enviar este tipo de evento para indicar cuándo un TouchPoint se ha interrumpido de una manera específica de implementación, como al moverse fuera de los límites de la ventana de UA. Un agente de usuario también puede enviar este tipo de evento cuando el usuario coloca más puntos de contacto (el punto de coordenadas en el que un puntero (por ejemplo, un dedo o un lápiz óptico) se cruza con la superficie de destino de una interfaz) en la superficie táctil que el dispositivo o implementación está configurado store, en cuyo caso se debe eliminar el primer objeto TouchPoint de la TouchList. [9] : §5.9 | sí | No |
En el borrador de recomendación del W3C , una TouchEvent
muestra una TouchList
de las Touch
ubicaciones, las teclas modificadoras que estaban activas, una TouchList
de las Touch
ubicaciones dentro del elemento DOM objetivo y una TouchList
de las Touch
ubicaciones que han cambiado desde la anterior TouchEvent
. [9]
Apple no se unió a este grupo de trabajo y retrasó la recomendación del W3C de su Especificación de eventos táctiles al revelar las patentes al final del proceso de recomendación. [10]
Eventos de puntero [11]
Los navegadores web en dispositivos con varios tipos de dispositivos de entrada, incluidos el mouse, el panel táctil y el lápiz, pueden generar eventos de entrada integrados. Los usuarios pueden ver qué tipo de dispositivo de entrada se presiona, qué botón se presiona en ese dispositivo y con qué fuerza se presiona el botón cuando se trata de un lápiz óptico. A partir de octubre de 2013, este evento solo es compatible con Internet Explorer 10 y 11.
Categoría | Tipo | Atributo | Descripción | Burbujas | Cancelable |
---|---|---|---|---|---|
Puntero | puntero | en puntero | Se dispara cuando se activa el botón del dispositivo señalador o se presiona sobre un elemento. | sí | sí |
puntero | onpointerup | Se dispara cuando se suelta el botón del dispositivo señalador sobre un elemento | sí | sí | |
puntero anular | onpointercancel | Se dispara cuando es poco probable que un dispositivo señalador continúe produciendo un evento porque, por ejemplo, el dispositivo se utiliza para realizar un movimiento panorámico / zoom después de un evento de puntero hacia abajo. | sí | sí | |
puntero | onpointermove | Se dispara cuando el dispositivo señalador se mueve mientras está sobre un elemento | sí | sí | |
pointerover | onpointerover | Se dispara cuando el dispositivo señalador se mueve sobre un elemento | sí | sí | |
puntero | en puntero | Se dispara cuando el dispositivo señalador se aleja de un elemento. También se dispara después del puntero hacia arriba mediante el dispositivo señalador sin desplazarse, o después | sí | sí | |
pointerenter | onpointerenter | Se dispara cuando el dispositivo señalador se mueve sobre un elemento, o cuando se presiona el botón del dispositivo señalador que no admite el vuelo estacionario en uno de sus elementos descendientes. | No | sí | |
puntero | onpointerleave | Se dispara cuando el dispositivo señalador se aleja de un elemento, o cuando se suelta el botón del dispositivo señalador que no admite el desplazamiento sobre sus elementos descendientes. | No | sí | |
gotpointercapture | ongotpointercapture | Se activa cuando el puntero es capturado por el método setPointerCapture. | sí | No | |
captura de pantalla | onlostpointercapture | Se activa cuando el método releasePointerCapture suelta el puntero. | sí | No |
Eventos de IU independientes [12]
Aún no implementado realmente, los grupos de trabajo de Indie UI quieren ayudar a los desarrolladores de aplicaciones web a admitir eventos de interacción de usuario estándar sin tener que manejar diferentes eventos técnicos específicos de la plataforma que podrían coincidir con ellos.
La creación de secuencias de comandos de interfaces utilizables puede ser difícil, especialmente cuando se considera que los patrones de diseño de la interfaz de usuario difieren entre plataformas de software, hardware y configuraciones regionales, y que esas interacciones se pueden personalizar aún más según las preferencias personales. Las personas están acostumbradas a la forma en que funciona la interfaz en su propio sistema, y su interfaz preferida con frecuencia difiere de la interfaz preferida del autor de la aplicación web.
Por ejemplo, los autores de aplicaciones web, que deseen interceptar la intención de un usuario de deshacer la última acción, deben "escuchar" todos los siguientes eventos:
- Control + Z en Windows y Linux.
- Comando + Z en Mac OS X.
- Agite eventos en algunos dispositivos móviles.
Sería más sencillo escuchar una única solicitud normalizada para "deshacer" la acción anterior.
Categoría | Tipo | Descripción | Burbujas | Cancelable |
---|---|---|---|---|
Pedido | deshacer | Indica que el usuario desea "deshacer" la acción anterior. (Puede ser reemplazado por la interfaz UndoManager). | sí | sí |
rehacer | Indica que el usuario desea "rehacer" la acción "deshecha" anteriormente. (Puede ser reemplazado por la interfaz UndoManager). | sí | No | |
expandir | Indica que el usuario desea revelar información en una sección contraída (por ejemplo, un widget de divulgación) o un nodo de rama en una jerarquía (por ejemplo, una vista de árbol). | sí | sí | |
colapso | Indica que el usuario desea ocultar o contraer información en una sección expandida (por ejemplo, un widget de divulgación) o un nodo de rama en una jerarquía (por ejemplo, una vista de árbol). | sí | sí | |
despedir | Indica que el usuario desea "descartar" la vista actual (por ejemplo, cancelar un diálogo o cerrar un menú emergente). | sí | sí | |
borrar petición | Indica que el usuario desea iniciar una acción de "eliminar" en el elemento marcado o en la vista actual. | sí | sí | |
Solicitud de enfoque | solicitud de enfoque direccional | Se inicia cuando el agente de usuario envía una solicitud de "enfoque de dirección" a la aplicación web. Los autores web no deben usar o registrarse para eventos de solicitud de enfoque direccional cuando los eventos de enfoque y desenfoque del navegador estándar son suficientes. El uso de estos eventos innecesariamente podría resultar en un rendimiento reducido o una experiencia de usuario negativa. | sí | sí |
solicitud de enfoque lineal | Se inicia cuando el agente de usuario envía una solicitud de "enfoque lineal" a la aplicación web. Los autores web no deben usar o registrarse para eventos de solicitud de enfoque lineal cuando los eventos de enfoque y desenfoque del navegador estándar son suficientes. Este tipo de evento solo es necesario en tipos de control especializados, como cuadrículas de datos, donde el siguiente elemento lógico puede no ser enfocable o incluso en el DOM hasta que se solicite. El uso de estos eventos innecesariamente podría resultar en un rendimiento reducido o una experiencia de usuario negativa. | sí | sí | |
palettefocusrequest | Se inicia cuando el agente de usuario envía una solicitud de "enfoque de paleta" a la aplicación web. Los autores de aplicaciones web que reciban este evento deben mover el foco a la primera paleta de la aplicación web o alternar el foco entre todas las paletas disponibles. Nota: las paletas a veces se denominan diálogos no modales o ventanas de inspección. | sí | sí | |
barra de herramientas | Se inicia cuando el agente de usuario envía una solicitud de "foco de barra de herramientas" a la aplicación web. Los autores de aplicaciones web que reciban este evento deben mover el foco a la barra de herramientas principal en la aplicación web o alternar el foco entre todas las barras de herramientas disponibles. | sí | sí | |
Solicitud de manipulación | moverequest | Se inicia cuando el agente de usuario envía una solicitud de movimiento a la aplicación web con valores delta x / y adjuntos. Esto se utiliza, por ejemplo, al mover un objeto a una nueva ubicación en un lienzo de diseño. | sí | sí |
panrequest | Se inicia cuando el agente de usuario envía una solicitud de panorámica a la aplicación web con valores delta x / y adjuntos. Esto se utiliza, por ejemplo, cuando se cambia el punto central mientras se realiza una panorámica de un mapa u otro visor de imágenes personalizado. | sí | sí | |
solicitud de rotacion | Se inicia cuando el agente de usuario envía una solicitud de rotación a la aplicación web con valores de origen x / y adjuntos y un valor de rotación en grados. | sí | sí | |
solicitud de zoom | Se inicia cuando el agente de usuario envía una solicitud de zoom a la aplicación web con los valores de origen x / y y el factor de escala de zoom adjuntos. | sí | sí | |
Solicitud de desplazamiento | solicitud de desplazamiento | Se inicia cuando el agente de usuario envía una solicitud de desplazamiento a la aplicación web con los valores delta x / y que lo acompañan o uno de los otros valores scrollType definidos. Los autores solo deben usar este evento y acción con vistas de desplazamiento personalizadas. | sí | sí |
Solicitud de cambio de valor | valuechangerequest | Se inicia cuando el agente de usuario envía una solicitud de cambio de valor a la aplicación web. Se usa en controles de rango personalizados como controles deslizantes, carruseles, etc. | sí | sí |
Eventos específicos de Internet Explorer
Además de los eventos comunes (W3C), Internet Explorer agrega dos tipos principales de eventos . Algunos de los eventos han sido implementados como estándares de facto por otros navegadores.
- Eventos del portapapeles .
- Eventos de enlace de datos. [ aclaración necesaria ]
Categoría | Tipo | Atributo | Descripción | Burbujas | Cancelable |
---|---|---|---|---|---|
Portapapeles | cortar | oncut | Se activa después de que se corta una selección en el portapapeles. | sí | sí |
Copiar | oncopia | Se activa después de que se copia una selección en el portapapeles. | sí | sí | |
pegar | pegar | Se activa después de pegar una selección del portapapeles. | sí | sí | |
antes de cortar | onbeforecut | Se dispara antes de que se corte una selección en el portapapeles. | sí | sí | |
antes copiar | onbeforecopy | Se activa antes de que se copie una selección en el portapapeles. | sí | sí | |
antes de pegar | antes de pegar | Se activa antes de que se pegue una selección del portapapeles. | sí | sí | |
El enlace de datos | despúes de actualizar | onafterupdate | Se activa inmediatamente después de que se haya actualizado un objeto vinculado a datos. | sí | No |
antes de actualizar | onbeforeupdate | Se activa antes de que se actualice una fuente de datos. | sí | sí | |
cambio de celda | una vez que cambie | Se activa cuando cambia una fuente de datos. | sí | No | |
datos disponibles | ondatadisponible | Se activa cuando están disponibles nuevos datos de una fuente de datos. | sí | No | |
conjunto de datos cambiado | ondatasetchanged | Se activa cuando el contenido de una fuente de datos ha cambiado. | sí | No | |
conjunto de datos completo | ondatasetcomplete | Se activa cuando se completa la transferencia de datos desde la fuente de datos. | sí | No | |
errorupdate | onerrorupdate | Se activa si se produce un error al actualizar un campo de datos. | sí | No | |
rowenter | onrowenter | Se activa cuando hay disponible una nueva fila de datos de la fuente de datos. | sí | No | |
rowexit | onrowexit | Se activa cuando acaba de finalizar una fila de datos de la fuente de datos. | No | sí | |
eliminar filas | onrowsdelete | Se activa cuando se elimina una fila de datos de la fuente de datos. | sí | No | |
rowinserted | inserido | Se activa cuando se inserta una fila de datos de la fuente de datos. | sí | No | |
Ratón | Menú de contexto | oncontextmenu | Se dispara cuando se muestra el menú contextual. | sí | sí |
arrastrar | ondrag | Se dispara cuando se arrastra el mouse (en el elemento en movimiento). | sí | sí | |
dragstart | ondragstart | Se dispara cuando comienza el arrastre del mouse (en el elemento en movimiento). | sí | sí | |
dragenter | ondragenter | Se dispara cuando se arrastra algo a un área (en el Elemento objetivo). | sí | sí | |
dragover | ondragover | Se dispara cuando se mantiene un arrastre sobre un área (en el elemento objetivo). | sí | sí | |
arrastrar | ondragleave | Se dispara cuando algo se arrastra fuera de un área (en el Elemento objetivo). | sí | sí | |
dragend | ondragend | Se dispara cuando termina el arrastre del mouse (en el elemento en movimiento). | sí | sí | |
soltar | ondrop | Se dispara cuando se suelta un botón del mouse sobre un objetivo válido durante un arrastre (en el elemento objetivo). | sí | sí | |
seleccionar inicio | onselectstart | Se activa cuando el usuario comienza a seleccionar texto. | sí | sí | |
Teclado | ayuda | onhelp | Se dispara cuando el usuario inicia la ayuda. | sí | sí |
Marco / objeto HTML | antes de descargar | antes de descargar | Se activa antes de que se descargue un documento. | No | sí |
detener | onstop | Se dispara cuando el usuario deja de cargar el objeto. (a diferencia del aborto, el evento de detención se puede adjuntar al documento) | No | No | |
Formulario HTML | anteseditar | onbeforeeditfocus | Se dispara antes de que un elemento se enfoque para su edición. | sí | sí |
Marquesina | comienzo | onstart | Se dispara cuando una marquesina comienza un nuevo bucle. | No | No |
terminar | al terminar | Se dispara cuando se completa el bucle de la marquesina. | No | sí | |
rebotar | rebotar | Se dispara cuando una marquesina de desplazamiento rebota en la otra dirección. | No | sí | |
Diverso | antes de imprimir | onbeforeprint | Se dispara antes de que se imprima un documento | No | No |
afterprint | onafterprint | Se dispara inmediatamente después de que se imprime el documento. | No | No | |
cambio de propiedad | onpropertychange | Se dispara cuando se cambia la propiedad de un objeto. | No | No | |
cambio de filtro | onfilterchange | Se activa cuando un filtro cambia de propiedades o finaliza una transición. | No | No | |
readystatechange | onreadystatechange | Se activa cuando cambia la propiedad readyState de un elemento. | No | No | |
perder la captura | onlosecapture | Se activa cuando se invoca el método releaseCapture. | No | No |
Tenga en cuenta que Mozilla, Safari y Opera también admiten el evento readystatechange para el objeto XMLHttpRequest . Mozilla también admite el evento antes de la descarga mediante el método tradicional de registro de eventos (DOM Nivel 0). Mozilla y Safari también admiten el menú contextual, pero Internet Explorer para Mac no.
Tenga en cuenta que Firefox 6 y versiones posteriores admiten los eventos antes y después de la impresión.
Eventos XUL
Además de los eventos comunes (W3C), Mozilla definió un conjunto de eventos que funcionan solo con elementos XUL . [ cita requerida ]
Categoría | Tipo | Atributo | Descripción | Burbujas | Cancelable |
---|---|---|---|---|---|
Ratón | DOMMouseScroll | DOMMouseScroll | Se dispara cuando se mueve la rueda del mouse, lo que hace que el contenido se desplace. | sí | sí |
arrastrar y soltar | ondragdrop | Se dispara cuando el usuario suelta el botón del mouse para soltar un objeto que se está arrastrando . | No | No | |
dragenter | ondragenter | Se dispara cuando el puntero del mouse se mueve por primera vez sobre un elemento durante un arrastre. Es similar al evento de mouseover pero ocurre al arrastrar. | No | No | |
dragexit | ondragexit | Se dispara cuando el puntero del mouse se aleja de un elemento durante un arrastre. También se llama después de una caída en un elemento. Es similar al evento de mouseout pero ocurre durante un arrastre. | No | No | |
draggesture | ondraggesture | Se dispara cuando el usuario comienza a arrastrar el elemento, generalmente manteniendo presionado el botón del mouse y moviendo el mouse. | No | No | |
dragover | ondragover | Relacionado con el evento mousemove, este evento se activa mientras se arrastra algo sobre un elemento. | No | No | |
Aporte | CheckboxStateChange | Se activa cuando una casilla de verificación está marcada o desmarcada, ya sea por el usuario o un script. | No | No | |
RadioStateChange | Se activa cuando se selecciona un botón de opción, ya sea por el usuario o un script. | No | No | ||
cerca | de cerca | Se activa cuando se ha solicitado cerrar la ventana. | No | sí | |
mando | a pedido | Similar al evento DOMActivate del W3C. Se dispara cuando se activa un elemento, por ejemplo, mediante un clic del mouse o al presionar una tecla. | No | No | |
aporte | en entrada | Se activa cuando un usuario ingresa texto en un cuadro de texto. | sí | No | |
Interfaz de usuario | DOMMenuItemActive | DOMMenuItemActive | Se activa cuando se coloca el cursor sobre un menú o un elemento de menú o se resalta. | sí | No |
DOMMenuItemInactive | DOMMenuItemInactive | Se activa cuando ya no se coloca el cursor sobre un menú o un elemento de menú ni se resalta. | sí | No | |
Menú de contexto | oncontextmenu | Se activa cuando el usuario solicita abrir el menú contextual del elemento. La acción para hacer esto varía según la plataforma, pero normalmente será un clic derecho. | No | sí | |
Desbordamiento | onoverflow | Activa un cuadro u otro elemento de diseño cuando no hay suficiente espacio para mostrarlo a tamaño completo. | No | No | |
desbordamiento cambiado | onoverflowchanged | Se dispara cuando cambia el estado de desbordamiento. | No | No | |
desbordamiento | onunderflow | Se dispara a un elemento cuando hay suficiente espacio para mostrarlo a tamaño completo. | No | No | |
emergente oculto | onpopuphidden | Se dispara a una ventana emergente después de que se ha ocultado. | No | No | |
popuphiding | onpopuphiding | Se dispara a una ventana emergente cuando está a punto de ocultarse. | No | No | |
ventana emergente | onpopupshowing | Se dispara a una ventana emergente justo antes de que se abra. | No | sí | |
ventana emergente | onpopupshown | Se dispara a una ventana emergente después de que se ha abierto, al igual que el evento onload se envía a una ventana cuando se abre. | No | No | |
Mando | transmisión | en radiodifusión | Colocado en un observador. El evento de difusión se envía cuando se cambian los atributos de la emisora que se está escuchando. | No | No |
actualización de comandos | oncommandupdate | Se activa cuando se produce una actualización de comando. | No | No |
Otros eventos
Para Mozilla y Opera 9, también hay eventos no documentados conocidos como DOMContentLoaded y DOMFrameContentLoaded que se activan cuando se carga el contenido DOM. Estos son diferentes de "cargar", ya que se activan antes de cargar archivos relacionados (por ejemplo, imágenes). Sin embargo, DOMContentLoaded se ha agregado a la especificación HTML 5 . [13] El evento DOMContentLoaded también se implementó en el motor de renderizado Webkit build 500+. [14] [15] Esto se correlaciona con todas las versiones de Google Chrome y Safari 3.1+. DOMContentLoaded también se implementa en Internet Explorer 9 . [dieciséis]
Opera 9 también admite los eventos de Web Forms 2.0 DOMControlValueChanged , invalid , forminput y formchange .
Flujo de eventos
Considere la situación en la que dos objetivos de eventos participan en un árbol . Ambos tienen detectores de eventos registrados en el mismo tipo de evento, diga "clic". Cuando el usuario hace clic en el elemento interno, hay dos formas posibles de manejarlo:
- Activa los elementos de exterior a interior (captura de eventos). Este modelo está implementado en Netscape Navigator .
- Activa los elementos de adentro hacia afuera ( evento burbujeante ). Este modelo está implementado en Internet Explorer y otros navegadores. [17]
W3C toma una posición intermedia en esta lucha. [18] : §1.2
Según el W3C, los eventos pasan por tres fases cuando un objetivo del evento participa en un árbol:
- La fase de captura: el evento viaja hacia abajo desde el objetivo del evento raíz hasta el objetivo de un evento.
- La fase objetivo: el evento viaja a través del objetivo del evento.
- La fase de burbuja ( opcional ): el evento vuelve a viajar desde el objetivo de un evento hasta el objetivo del evento raíz. La fase de burbuja solo ocurrirá para eventos que burbujean (donde
event.bubbles == true
)
Puede encontrar una visualización de este flujo de eventos en https://domevents.dev
Detener eventos
Mientras un evento viaja a través de detectores de eventos, el evento se puede detener con event.stopPropagation()
oevent.stopImmediatePropagation()
event.stopPropagation()
: el evento se detiene después de que todos los detectores de eventos adjuntos al objetivo del evento actual en la fase del evento actual hayan finalizadoevent.stopImmediatePropagation()
: el evento se detiene inmediatamente y no se ejecutan más detectores de eventos
Cuando se detiene un evento, ya no viajará a lo largo de la ruta del evento. Detener un evento no cancela un evento.
Mecanismos heredados para detener un evento:
- Configure el
event.cancelBubble
entrue
(Internet Explorer) - Establezca la
event.returnValue
propiedad enfalse
Cancelación de eventos
Un cancelable
evento se puede cancelar llamando event.preventDefault()
. La cancelación de un evento excluirá el comportamiento predeterminado del navegador para ese evento. Cuando se cancela un evento, la event.defaultPrevented
propiedad se establecerá en true
. La cancelación de un evento no impedirá que el evento viaje a lo largo de la ruta del evento.
Objeto de evento
El objeto Evento proporciona mucha información sobre un evento en particular, incluida información sobre el elemento de destino, tecla presionada, botón del mouse presionado, posición del mouse, etc. Desafortunadamente, existen serias incompatibilidades de navegador en esta área. Por lo tanto, en este artículo solo se analiza el objeto Evento del W3C.
Nombre | Tipo | Descripción |
---|---|---|
tipo | DOMString | El nombre del evento (no distingue entre mayúsculas y minúsculas en DOM nivel 2 pero distingue entre mayúsculas y minúsculas en DOM nivel 3 [19] ). |
objetivo | EventTarget | Se utiliza para indicar el EventTarget al que se envió originalmente el evento. |
objetivo actual | EventTarget | Se utiliza para indicar el EventTarget cuyos EventListeners se están procesando actualmente. |
eventPhase | corto sin firmar | Se utiliza para indicar qué fase del flujo de eventos se está evaluando actualmente. |
burbujas | booleano | Se usa para indicar si un evento es un evento burbujeante o no. |
cancelable | booleano | Se utiliza para indicar si se puede prevenir o no la acción predeterminada de un evento. |
timeStamp | DOMTimeStamp | Se utiliza para especificar la hora (en milisegundos relativa a la época) en la que se creó el evento. |
Nombre | Tipo de argumento | Nombre del argumento | Descripción |
---|---|---|---|
stopPropagation | Para evitar una mayor propagación de un evento durante el flujo de eventos. | ||
preventDefault | Cancelar el evento si es cancelable, lo que significa que no ocurrirá ninguna acción predeterminada que normalmente toma la implementación como resultado del evento. | ||
initEvent | DOMString | eventTypeArg | Especifica el tipo de evento. |
booleano | canBubbleArg | Especifica si el evento puede burbujear o no. | |
booleano | cancelableArg | Especifica si se puede prevenir o no la acción predeterminada del evento. |
Modelos de manejo de eventos
DOM Nivel 0
Este modelo de manejo de eventos fue introducido por Netscape Navigator y sigue siendo el modelo más entre navegadores a partir de 2005[actualizar]. [ cita requerida ] Hay dos tipos de modelos: el modelo en línea y el modelo tradicional.
Modelo en línea
En el modelo en línea, [20] controladores de eventos se agregan como atributos de elementos. En el siguiente ejemplo, aparece un cuadro de diálogo de alerta con el mensaje "Hola, Joe" después de hacer clic en el hipervínculo . La acción de clic predeterminada se cancela devolviendo false en el controlador de eventos.
< html lang = "en" > < head > < meta charset = "utf-8" > < title > Manejo de eventos en línea title > head > < body >< h1 > Manejo de eventos en línea h1 >< p > Hola < a href = "http://www.example.com" onclick = "triggerAlert ('Joe'); return false;" > ¡ Joe a > ! p >< script > función triggerAlert ( nombre ) { ventana . alerta ( "Hey" + nombre ); } script > body > html >
Un error común [ cita requerida ] con el modelo en línea es la creencia de que permite el registro de controladores de eventos con argumentos personalizados, por ejemplo, name
en la triggerAlert
función. Si bien puede parecer que ese es el caso en el ejemplo anterior, lo que realmente está sucediendo es que el motor JavaScript del navegador crea una función anónima que contiene las declaraciones en el onclick
atributo. El onclick
controlador del elemento estaría vinculado a la siguiente función anónima:
function () { triggerAlert ( 'Joe' ); devolver falso ; }
Esta limitación del modelo de eventos de JavaScript generalmente se supera asignando atributos al objeto de función del controlador de eventos o utilizando cierres .
Modelo tradicional
En el modelo tradicional, [21] los controladores de eventos pueden agregarse o eliminarse mediante scripts. Al igual que el modelo en línea, cada evento solo puede tener un controlador de eventos registrado. El evento se agrega asignando el nombre del controlador a la propiedad de evento del objeto del elemento. Para eliminar un controlador de eventos, simplemente establezca la propiedad en nulo:
< html lang = "en" > < head > < meta charset = "utf-8" > < title > Manejo tradicional de eventos title > head >< cuerpo > < h1 > Manejo de eventos tradicional h1 >< p > ¡Hola Joe! p >< script > var triggerAlert = function () { window . alert ( "Hola Joe" ); };// Asignar un documento controlador de eventos . onclick = triggerAlert ;// Asignar otra ventana de controlador de eventos . onload = triggerAlert ;// Elimina el controlador de eventos al que se le acaba de asignar la ventana . onload = null ; script > body > html >
Para agregar parámetros:
var name = 'Joe' ; documento . onclick = ( función ( nombre ) { función de retorno () { alerta ( 'Hey' + nombre + '!' ); }; } ( nombre ));
Las funciones internas conservan su alcance .
DOM Nivel 2
El W3C diseñó un modelo de manejo de eventos más flexible en DOM Nivel 2. [18]
Nombre | Descripción | Tipo de argumento | Nombre del argumento |
---|---|---|---|
addEventListener | Permite el registro de oyentes de eventos en el destino del evento. | DOMString | tipo |
EventListener | oyente | ||
booleano | useCapture | ||
removeEventListener | Permite la eliminación de detectores de eventos del objetivo del evento. | DOMString | tipo |
EventListener | oyente | ||
booleano | useCapture | ||
dispatchEvent | Permite enviar el evento a los oyentes de eventos suscritos. | Evento | evt |
Algunas cosas útiles que debe saber:
- Para evitar que un evento se propague, los desarrolladores deben llamar al
stopPropagation()
método del objeto de evento. - Para evitar que se llame a la acción predeterminada del evento, los desarrolladores deben llamar al
preventDefault()
método del objeto de evento.
La principal diferencia con el modelo tradicional es que se pueden registrar varios controladores de eventos para el mismo evento. La useCapture
opción también se puede utilizar para especificar que se debe llamar al controlador en la fase de captura en lugar de en la fase de propagación. Este modelo es compatible con Mozilla , Opera , Safari , Chrome y Konqueror .
Una reescritura del ejemplo utilizado en el modelo tradicional.
< html lang = "en" > < head > < meta charset = "utf-8" > < title > DOM Nivel 2 title > head >< cuerpo > < h1 > DOM Nivel 2 h1 > < p > ¡Hola Joe! p > < script > var heyJoe = function () { ventana . alert ( "¡Hola Joe!" ); } // Agrega un documento de controlador de eventos . addEventListener ( "clic" , heyJoe , verdadero ); // fase de captura // Agrega otra ventana de controlador de eventos . addEventListener ( "cargar" , heyJoe , falso ); // fase de burbujeo // Elimina el controlador de eventos recién agregado window . removeEventListener ( "cargar" , heyJoe , falso ); script >cuerpo > html >
Modelo específico de Internet Explorer
Microsoft Internet Explorer anterior a la versión 8 no sigue el modelo W3C, ya que su propio modelo fue creado antes de la ratificación del estándar W3C. Internet Explorer 9 sigue los eventos DOM nivel 3, [22] e Internet Explorer 11 elimina su soporte para el modelo específico de Microsoft. [23]
Nombre | Descripción | Tipo de argumento | Nombre del argumento |
---|---|---|---|
attachEvent | Similar al método addEventListener de W3C. | Cuerda | sEvento |
Puntero | fpNotify | ||
detachEvent | Similar al método removeEventListener de W3C. | Cuerda | sEvento |
Puntero | fpNotify | ||
fireEvent | Similar al método dispatchEvent del W3C. | Cuerda | sEvento |
Evento | oEventObject |
Algunas cosas útiles que debe saber:
- Para evitar la propagación de un evento, los desarrolladores deben establecer la
cancelBubble
propiedad del evento . - Para evitar que se llame a la acción predeterminada del evento, los desarrolladores deben establecer la
returnValue
propiedad del evento . - La
this
palabra clave se refiere alwindow
objeto global .
Una vez más, este modelo se diferencia del modelo tradicional en que se pueden registrar varios controladores de eventos para el mismo evento. Sin embargo, la useCapture
opción no se puede utilizar para especificar que se debe llamar al controlador en la fase de captura. Este modelo es compatible con los navegadores basados en Microsoft Internet Explorer y Trident (por ejemplo , Maxthon , Avant Browser ).
Una reescritura del ejemplo utilizado en el antiguo modelo específico de Internet Explorer.
< html lang = "en" > < head > < meta charset = "utf-8" > < title > modelo específico de Internet Explorer title > head > < body > < h1 > Internet Explorer -modelo específico h1 > < p > ¡Hola Joe! p > < script > var heyJoe = function () { ventana . alert ( "¡Hola Joe!" ); } // Agrega un documento de controlador de eventos . attachEvent ( "al hacer clic" , heyJoe ); // Agrega otra ventana de controlador de eventos . attachEvent ( "onload" , heyJoe ); // Elimina el controlador de eventos recién agregado window . detachEvent ( "onload" , heyJoe ); script >cuerpo > html >
Referencias
- Deitel, Harvey. (2002). Internet y World Wide Web: cómo programar (segunda edición). ISBN 0-13-030897-8
- La Organización Mozilla. (2009). Referencia de evento DOM . Consultado el 25 de agosto de 2009.
- Quirksmode (2008). Tablas de compatibilidad de eventos . Consultado el 27 de noviembre de 2008.
- http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/
enlaces externos
- Especificación de eventos de nivel 2 del modelo de objetos de documento (DOM)
- Borrador de trabajo de eventos de nivel 3 del modelo de objetos de documento (DOM)
- DOM4: Eventos (Borrador del editor)
- Borrador de trabajo de eventos de UI
- Pointer Events W3C Candidate Recomendación
- Evento de puntero de MSDN
- domevents.dev: un visualizador para aprender sobre eventos DOM a través de la exploración
- Violín JS para captura y burbujeo de eventos
Referencias
- ^ "Estándar DOM" . dom.spec.whatwg.org . Consultado el 25 de mayo de 2021 .
- ^ "Eventos DOM de JavaScript" . www.w3schools.com . Consultado el 3 de agosto de 2019 .
- ^ "7.8 Arrastrar y soltar - HTML5" .
- ^ "API HTML de arrastrar y soltar" .
- ^ "Eventos de progreso" .
- ^ "Archivo API" .
- ^ https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event
- ^ "Modelo de objetos de documento (DOM) Nivel 3 Especificación de eventos (borrador de trabajo)" . W3C . Consultado el 17 de abril de 2013 .
- ^ a b c "Touch Events versión 2 - Borrador del editor W3C" . W3C. 14 de noviembre de 2011 . Consultado el 10 de diciembre de 2011 .
- ^ "Apple vuelve a utilizar patentes para socavar los estándares abiertos" . opera.com. 9 de diciembre de 2011 . Consultado el 9 de diciembre de 2011 .
- ^ "Eventos de puntero" .
- ^ "IndieUI: Eventos 1.0" .
- ^ https://www.w3.org/TR/html5/
- ^ [1] Archivado el 11 de junio de 2010 en la Wayback Machine.
- ^ "¿Qué navegadores admiten el evento DOMContentLoaded nativo?« Consejos de desarrollo de Perfection Labs " . 29 de junio de 2011. Archivado desde el original el 29 de junio de 2011.CS1 maint: bot: estado de URL original desconocido ( enlace )
- ^ "Test Drive Redirect" . Archivado desde el original el 8 de mayo de 2010 . Consultado el 6 de mayo de 2010 .
- ^ "Introducción a los eventos" . Quirksmode.org . Consultado el 15 de septiembre de 2012 .
- ^ a b "Especificación de eventos de nivel 2 del modelo de objetos de documento (DOM)" . W3C . 13 de noviembre de 2000 . Consultado el 15 de septiembre de 2012 .
- ^ "Modelo de objetos de documento (DOM) Nivel 3 Especificación de eventos (borrador de trabajo)" . W3C . Consultado el 17 de abril de 2013 .
- ^ "Manejadores de eventos tempranos" . Quirksmode.org . Consultado el 15 de septiembre de 2012 .
- ^ "Modelo tradicional de registro de eventos" . Quirksmode.org . Consultado el 15 de septiembre de 2012 .
- ^ "Compatibilidad con eventos DOM Nivel 3 en IE9" . Microsoft . 26 de marzo de 2010 . Consultado el 28 de marzo de 2010 .
- ^ "Cambios de compatibilidad en la vista previa de IE11" . Microsoft . 9 de septiembre de 2013 . Consultado el 5 de octubre de 2013 .