stringtranslate.com

Evento DOM

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.

Eventos

Eventos HTML

Eventos comunes

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 .

Eventos táctiles

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]

Eventos de puntero

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]

Eventos de interfaz de usuario independiente

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.

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 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.

Eventos XUL

Además de los eventos comunes (W3C), Mozilla definió un conjunto de eventos que funcionan únicamente con elementos XUL . [ cita requerida ]

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 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 .

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, 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:

  1. La fase de captura: el evento viaja desde el objetivo del evento raíz hasta el objetivo de un evento.
  2. La fase objetivo: el evento viaja a través del objetivo del evento.
  3. 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 se producirá para los eventos que burbujean (donde event.bubbles == true)

Puede encontrar una visualización de este flujo de eventos en https://domevents.dev

Detención de eventos

Mientras un evento viaja a través de los escuchas de eventos, el evento se puede detener con event.stopPropagation()oevent.stopImmediatePropagation()

Cuando se detiene un evento, ya no recorre la ruta del evento. Detener un evento no lo cancela.

Mecanismos heredados para detener un evento

Cancelación de eventos

Se 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.

Objeto de 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.

Modelos de manejo de eventos

Nivel DOM 0

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. [ 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, 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 .

Modelo tradicional

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 ( 'Hey ' + nombre + '!' ); }; } ( nombre ) );              

Las funciones internas conservan su alcance .

Nivel 2 del DOM

El W3C diseñó un modelo de manejo de eventos más flexible en el DOM Nivel 2. [18]

Algunas cosas útiles que conviene saber:

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 .

Una reescritura del ejemplo utilizado en el modelo tradicional

<!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 >

Modelo específico de Internet Explorer

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:

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).

Una reescritura del ejemplo utilizado en el antiguo modelo específico de Internet Explorer

<!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 >

Referencias

  1. ^ "Estándar DOM". dom.spec.whatwg.org . Consultado el 25 de mayo de 2021 .
  2. ^ "Eventos DOM de JavaScript". www.w3schools.com . Consultado el 3 de agosto de 2019 .
  3. ^ "7.8 Arrastrar y soltar — HTML5".
  4. ^ "API de arrastrar y soltar HTML". 28 de marzo de 2024.
  5. ^ "Eventos de progreso".
  6. ^ "API de archivos".
  7. ^ "Elemento: evento Mousemove - Web APIs | MDN". 22 de diciembre de 2023.
  8. ^ "Especificación de eventos de nivel 3 del Modelo de objetos de documento (DOM) (borrador de trabajo)". W3C . Consultado el 17 de abril de 2013 .
  9. ^ abc "Touch Events version 2 - W3C Editor's Draft". W3C. 14 de noviembre de 2011. Consultado el 10 de diciembre de 2011 .
  10. ^ "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 .
  11. ^ "Eventos de puntero".
  12. ^ "IndieUI: Eventos 1.0".
  13. ^ "Estándar HTML".
  14. ^ [1] Archivado el 11 de junio de 2010 en Wayback Machine .
  15. ^ "¿Qué navegadores admiten el evento DOMContentLoaded nativo? « Perfection Labs Development Tips». 29 de junio de 2011. Archivado desde el original el 29 de junio de 2011.{{cite web}}: CS1 maint: bot: estado de URL original desconocido ( enlace )
  16. ^ "Redireccionamiento de prueba de manejo". Archivado desde el original el 8 de mayo de 2010. Consultado el 6 de mayo de 2010 .
  17. ^ "Introducción a los eventos". Quirksmode.org . Consultado el 15 de septiembre de 2012 .
  18. ^ ab "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 .
  19. ^ "Especificación de eventos de nivel 3 del Modelo de objetos de documento (DOM) (borrador de trabajo)". W3C . Consultado el 17 de abril de 2013 .
  20. ^ "Antiguos controladores de eventos". Quirksmode.org . Consultado el 15 de septiembre de 2012 .
  21. ^ "Modelo de registro de eventos tradicionales". Quirksmode.org . Consultado el 15 de septiembre de 2012 .
  22. ^ "Compatibilidad de eventos DOM de nivel 3 en IE9". Microsoft . 26 de marzo de 2010 . Consultado el 28 de marzo de 2010 .
  23. ^ "Cambios de compatibilidad en la versión preliminar de IE11". Microsoft . 9 de septiembre de 2013 . Consultado el 5 de octubre de 2013 .

Lectura adicional

Enlaces externos