evento DOM

Existe una enorme colección de eventos que pueden ser generados por la mayoría de los nodos de elementos:

• Eventos del ratón . ^{[ 3 ] [ 4 ]}
• Eventos de teclado .
• Eventos de marcos/objetos HTML.
• Eventos de formularios 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 ]} (utilizados por XMLHttpRequest y File API ^{[ 6 ]} ).

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 cuentan con un buen soporte y, por esta y otras razones de rendimiento, el W3C los considera obsoletos en el nivel 3 de DOM. 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 con capacidad táctil , como iOS de Apple y Android de Google , generan eventos adicionales. ^{[ 9 ] : §5.3}

En el borrador de recomendación del W3CTouchEvent , se entrega una lista TouchListde Touchubicaciones, las teclas modificadoras que estaban activas, una lista TouchListde Touchubicaciones dentro del elemento DOM de destino y una lista TouchListde Touchubicaciones 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 patentes tardíamente en el proceso de recomendación. ^{[ 10 ]}

Los navegadores web en dispositivos con diversos tipos de dispositivos de entrada, como ratón, panel táctil y lápiz óptico, pueden generar eventos de entrada integrados. Los usuarios pueden ver qué tipo de dispositivo de entrada se presiona, qué botón se pulsa en ese dispositivo y con qué fuerza se pulsa el botón en el caso de un lápiz óptico. A octubre de 2013, este evento solo era compatible con Internet Explorer 10 y 11. ^{[ 11 ]}

Aunque aún no se ha implementado del todo, los grupos de trabajo de Indie UI quieren ayudar a los desarrolladores de aplicaciones web a poder 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. ^{[ 12 ]}

Crear interfaces de usuario intuitivas puede ser difícil, sobre todo si se tiene en cuenta que los patrones de diseño varían según la plataforma, el hardware y la configuración regional, y que estas interacciones pueden personalizarse aún más según las preferencias personales. Los usuarios están acostumbrados al funcionamiento de la interfaz en su propio sistema, y ​​su interfaz preferida suele diferir de la del desarrollador de la aplicación web.

Por ejemplo, los autores de aplicaciones web que deseen interceptar la intención del 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.
• Eventos de agitación en algunos dispositivos móviles.

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 añade dos tipos principales de eventos . Algunos de estos eventos han sido implementados como estándares de facto por otros navegadores.

• Eventos del portapapeles .
• Eventos de enlace de datos.

Cabe destacar 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 el menú contextual, pero Internet Explorer para Mac no.

Tenga en cuenta que Firefox 6 y versiones posteriores admiten los eventos beforeprint y afterprint.

• Establecer event.cancelBubbleen true(Internet Explorer)
• Establecer la event.returnValuepropiedad enfalse

En el modelo en línea, ^{[ 20 ]} los manejadores de eventos se agregan 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 manejador 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 ! </p> <a href="http://www.example.com" onclick="triggerAlert('Joe'); return false;"> Joe </a> ! </p>​​​​​​​​​​​<script> function triggerAlert ( name ) { window.alert ( " Hola " + name ) ; } </script> </body> </html>​​​​​​​

Una idea errónea común sobre el modelo en línea es creer que permite el registro de manejadores de eventos con argumentos personalizados, por ejemplo, en la función. Si bien puede parecer que ese es el caso en el ejemplo anterior, lo que realmente sucede es que el motor JavaScript del navegador crea una función anónima que contiene las instrucciones en el atributo. El manejador del elemento estaría vinculado a la siguiente función anónima:nametriggerAlertonclickonclick

función () { triggerAlert ( 'Joe' ); return false ; }

Esta limitación del modelo de eventos de JavaScript se suele superar asignando atributos al objeto de función del controlador de eventos o utilizando cierres .

En el modelo tradicional, ^{[ 21 ]} los manejadores de eventos se pueden agregar o eliminar mediante scripts. Al igual que en el modelo en línea, cada evento solo puede tener un manejador de eventos registrado. El evento se agrega asignando el nombre del manejador a la propiedad de evento del objeto elemento. Para eliminar un manejador de eventos, simplemente establezca la propiedad en nulo:

<!doctype html> < html lang = "en" > < head > < meta charset = "utf-8" > < title > Manejo tradicional de eventos </ title > </ head ><body> <h1> Gestión de eventos tradicional </h1>​​​<p> ¡ Hola Joe ! </p>​<script> var triggerAlert = function () { window.alert ( " Hola 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 añadir parámetros:

var nombre = 'Joe' ; document . onclick = ( function ( nombre ) { return function () { alert ( '¡Hola ' + nombre + '!' ); }; }( nombre ));

Las funciones internas conservan su alcance .