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 script del lado del cliente como JavaScript , JScript , VBScript y Java pueden registrar varios controladores o escuchas de eventos en los nodos de elementos dentro de un árbol DOM , como en documentos HTML , XHTML , XUL y SVG .
Ejemplos de eventos DOM:
Históricamente, al igual que el DOM, los modelos de eventos utilizados por los distintos navegadores web presentaban algunas diferencias significativas que causaban problemas de compatibilidad. Para combatir esto, el modelo de eventos fue estandarizado por el Consorcio World Wide Web (W3C) en el nivel DOM 2.
Existe una enorme colección de eventos que pueden generar la mayoría de los nodos de elementos:
Tenga en cuenta que la clasificación de eventos anterior no es exactamente la misma que la clasificación del W3C.
Tenga en cuenta que los eventos cuyos nombres comienzan con "DOM" actualmente no tienen un buen soporte y, por esta y otras razones de rendimiento, el W3C los ha desaprobado en DOM Nivel 3. Mozilla y Opera admiten DOMAttrModified , DOMNodeInserted , DOMNodeRemoved y DOMCharacterDataModified . Chrome y Safari admiten estos eventos, excepto DOMAttrModified .
Los navegadores web que se ejecutan en dispositivos táctiles , como iOS de Apple y Android de Google , generan eventos adicionales. [9] : §5.3
En el borrador de recomendación del W3C , a TouchEvententrega un TouchListde Touchubicaciones, las teclas modificadoras que estaban activas, un TouchListde Touchubicaciones dentro del elemento DOM de destino y un TouchListde Touchubicaciones que han cambiado desde el 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 tarde en el proceso de recomendación. [10]
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. [11]
Aunque todavía no está realmente implementado, los grupos de trabajo de Indie UI quieren ayudar a los desarrolladores de aplicaciones web a poder soportar 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. [12]
La creación de scripts de interfaces utilizables puede resultar difícil, especialmente si se tiene en cuenta que los patrones de diseño de las interfaces de usuario difieren en las distintas plataformas de software, hardware y configuraciones regionales, y que esas interacciones se pueden personalizar aún más en función de 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 desean interceptar la intención de un usuario de deshacer la última acción, necesitan "escuchar" todos los siguientes eventos:
Sería más sencillo escuchar una única solicitud normalizada para "deshacer" la acción anterior.
Además de los eventos comunes (W3C), Internet Explorer agrega dos tipos principales de eventos . Algunos de los eventos se han implementado como estándares de facto en otros navegadores.
Tenga en cuenta que Mozilla, Safari y Opera también admiten el evento readystatechange para el objeto XMLHttpRequest . Mozilla también admite el evento beforeunload mediante el método de registro de eventos tradicional (DOM nivel 0). Mozilla y Safari también admiten contextmenu, pero Internet Explorer para Mac no.
Tenga en cuenta que Firefox 6 y versiones posteriores admiten los eventos beforeprint y afterprint.
Además de los eventos comunes (W3C), Mozilla definió un conjunto de eventos que funcionan únicamente con elementos XUL . [ cita requerida ]
Para Mozilla y Opera 9, también hay eventos no documentados conocidos como DOMContentLoaded y DOMFrameContentLoaded que se activan cuando se carga el contenido del DOM. Estos son diferentes de "load" ya que se activan antes de la carga de 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. [ 16]
Opera 9 también admite los eventos de Web Forms 2.0 DOMControlValueChanged , invalid , forminput y formchange .
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, por ejemplo, "clic". Cuando el usuario hace clic en el elemento interno, hay dos formas posibles de manejarlo:
El W3C adopta una posición intermedia en esta lucha. [18] : §1.2
Según el W3C, los eventos pasan por tres fases cuando un objetivo de evento participa en un árbol:
event.bubbles == true)Puede encontrar una visualización de este flujo de eventos en https://domevents.dev
Mientras un evento viaja a través de los escuchas de eventos, el evento se puede detener con event.stopPropagation()oevent.stopImmediatePropagation()
event.stopPropagation(): el evento se detiene después de que todos los oyentes 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 escuchas de eventosCuando se detiene un evento, ya no recorre la ruta del evento. Detener un evento no lo cancela.
event.cancelBubbleen true(Internet Explorer)event.returnValuepropiedad enfalseSe puede cancelar un cancelableevento llamando a event.preventDefault(). Al cancelar un evento, se inhabilitará el comportamiento predeterminado del navegador para ese evento. Cuando se cancela un evento, la event.defaultPreventedpropiedad se establecerá en true. La cancelación de un evento no impedirá que el evento recorra la ruta del evento.
El objeto Evento proporciona mucha información sobre un evento en particular, incluida información sobre el elemento de destino, la tecla presionada, el botón del mouse presionado, la posición del mouse, etc. Lamentablemente, existen incompatibilidades muy graves entre navegadores en esta área. Por lo tanto, en este artículo solo se analiza el objeto Evento W3C.
Este modelo de manejo de eventos fue introducido por Netscape Navigator y sigue siendo el modelo más compatible con todos los navegadores a partir de 2005. [actualizar][ cita requerida ] Hay dos tipos de modelos: el modelo en línea y el modelo tradicional.
En el modelo en línea, se agregan [20] controladores de eventos como atributos de los elementos. En el ejemplo siguiente, 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 falso en el controlador de eventos.
<!doctype html> < 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 > function triggerAlert ( nombre ) { window.alert ( "Hola " + 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, nameen la triggerAlertfunción. Si bien puede parecer que ese es el caso en el ejemplo anterior, lo que realmente sucede es que el motor de JavaScript del navegador crea una función anónima que contiene las declaraciones en el onclickatributo. El onclickcontrolador del elemento estaría vinculado a la siguiente función anónima:
función () { 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 mediante el uso de cierres .
En el modelo tradicional, [21] los controladores de eventos se pueden agregar o eliminar mediante scripts. Al igual que en 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 de elemento. Para eliminar un controlador de eventos, simplemente configure la propiedad como nula:
<!doctype html> < html lang = "en" > < head > < meta charset = "utf-8" > < title > Manejo tradicional de eventos </ title > </ head > < body > < h1 > Manejo tradicional de eventos </ h1 >< p > ¡Hola Joe! </ p >< script > var triggerAlert = function () { window . alert ( "Hey Joe" ); }; // Asignar un controlador de eventos document . onclick = triggerAlert ; // Asignar otro controlador de eventos window . onload = triggerAlert ; // Eliminar el controlador de eventos que se acaba de asignar window . onload = null ; </ script > </ body > </ html > Para agregar parámetros:
var nombre = 'Joe' ; documento.onclick = ( función ( nombre ) { return función () { alerta ( '¡Hola' + nombre + '!' ); }; } ( nombre ) ); Las funciones internas conservan su alcance .
El W3C diseñó un modelo de manejo de eventos más flexible en el DOM Nivel 2. [18]
Algunas cosas útiles que conviene saber:
stopPropagation()método del objeto de evento.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 useCaptureopción también se puede utilizar para especificar que el controlador se debe llamar 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 .
<!doctype html> < 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 () { window . alert ( "Hey Joe!" ); } // Agregar un controlador de eventos document . addEventListener ( "click" , heyJoe , true ); // fase de captura // Agregar otro controlador de eventos window . addEventListener ( "load" , heyJoe , false ); // fase de burbujeo // Eliminar el controlador de eventos que se acaba de agregar window . removeEventListener ( "load" , heyJoe , false ); </ script > </ cuerpo > </ html >Las versiones anteriores a la 8 de Microsoft Internet Explorer no siguen el modelo del W3C, ya que su propio modelo fue creado antes de la ratificación del estándar del W3C. Internet Explorer 9 sigue los eventos de nivel DOM 3, [22] e Internet Explorer 11 elimina su compatibilidad con el modelo específico de Microsoft. [23]
Algunas cosas útiles que conviene saber:
cancelBubblepropiedad del evento.returnValuepropiedad del evento.thispalabra clave se refiere al windowobjeto global.Nuevamente, este modelo difiere del modelo tradicional en que se pueden registrar múltiples controladores de eventos para el mismo evento. Sin embargo, useCaptureno se puede utilizar la opción para especificar que se debe llamar al controlador en la fase de captura. Este modelo es compatible con Microsoft Internet Explorer y los navegadores basados en Trident (por ejemplo, Maxthon , Avant Browser).
<!doctype html> < html lang = "en" > < head > < meta charset = "utf-8" > < title > Modelo específico de Internet Explorer </ title > </ head > < body > < h1 > Modelo específico de Internet Explorer </ h1 > < p > ¡Hola Joe! </ p > < script > var heyJoe = function () { window . alert ( "Hey Joe!" ); } // Agregar un controlador de eventos document . AttachEvent ( "onclick" , heyJoe ); // Agregar otro controlador de eventos window . AttachEvent ( "onload" , heyJoe ); // Eliminar el controlador de eventos que se acaba de agregar window . DetachEvent ( "onload" , heyJoe ); </ script > </ cuerpo > </ html >{{cite web}}: CS1 maint: bot: estado de URL original desconocido ( enlace )