DOM Eventos [ tierra de nómadas ]

DOM Eventos

Nota: Los scripts de esta página realizan una comprobación previa, basada en el método hasFeature de la interfaz DOMImplementation, para determinar si deben ejecutarse o no. Es posible que, aun sin ser plenamente compatible con el módulo correspondiente, el navegador sea capaz de interpretar correctamente algún script, por lo que se ofrece la posibilidad de deshabilitar dicho test pulsando el botón dispuesto a continuación. Obviamente, el caso contrario también es posible, y puede ocurrir que un script no funcione aunque haya dado positivo en la prueba.

Métodos y propiedades utilizados en los ejemplos

getElementById (Identificador)

(DOM Núcleo: Método de Document) Devuelve el nodo Elemento cuyo id es Identificador.

documentElement

(DOM Núcleo: Atributo de Document) Devuelve el elemento raíz del documento.

nodeName

(DOM Núcleo: Propiedad de Node) El nombre del nodo. Dependiendo del tipo de nodo, esto tiene un sentido u otro (el nombre del atributo en nodos Attr, el nombre de la etiqueta en los nodos Element, etc.).

nodeValue

(DOM Núcleo: Propiedad de Node) El valor del nodo, como el valor del atributo en nodos Attr, el texto de los nodos Text, null en los nodos Element, etc..

firstChild

(DOM Núcleo: Propiedad de Node) El primer hijo del nodo al que se aplica.

defaultView

(DOM Vistas: Propiedad de DocumentView) La interfaz por defecto de la que derivan las posibles vistas.

createEvent (Tipo)

(DOM Eventos: Método de DocumentEvent) Crea una interfaz Event del tipo especificado.

addEventListener (Tipo, Perceptor, Captura)

(DOM Eventos: Método de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor, y permitiendo la captura del evento en función del valor Captura.

dispatchEvent (Evento)

(DOM Eventos: Método de EventTarget) Envía el Evento especificado al nodo objetivo al que se aplica.

stopPropagation ()

(DOM Eventos: Método de Event) Cancela la propagación de un evento durante su flujo.

target

(DOM Eventos: Propiedad de Event) Devuelve el nodo EventTarget objetivo inicial del evento.

currentTarget

(DOM Eventos: Propiedad de Event) Devuelve el nodo EventTarget que se está procesando en este momento.

screenX

(DOM Eventos: Propiedad de MouseEvent) Coordenada horizontal relativa al origen de la pantalla.

screenY

(DOM Eventos: Propiedad de MouseEvent) Coordenada vertical relativa al origen de la pantalla.

initMouseEvent (Tipo, Burbujea, Cancelable, Vista, Numero, coordX, coordY, clientX, clientY, Ctrl, Alt, Mayús, Meta, Boton, Objetivo)

(DOM Eventos: Método de MouseEvent) Inicia un evento de ratón del tipo Tipo, especificando valores booleanos para Burbujea y Cancelable, en una Vista, con Numero pulsaciones, en las coordenadas de pantalla coordX y coordY, en las coordenadas cliente clientX y clientY, atendiendo al estado de las teclas Ctrl, Alt, Mayús y Meta, habiendo pulsado el botón Boton, en el contexto Objetivo.

Agregando perceptores de eventos

Registro del evento de movimiento del ratón, y lectura de las coordenadas y del nombre del nodo que se "sobrevuela".

document.documentElement.addEventListener('mousemove',leerPosicion,false);
document.documentElement.addEventListener('mousemove',leerNombreNodo,false);
 
function leerPosicion(Evento) {
   var elmText = document.getElementById('ParrafoEjPos').firstChild;
   elmText.nodeValue = '['+Evento.clientX+','+Evento.clientY+']';
}
 
function leerNombreNodo(Evento) {
   var elmText = document.getElementById('ParrafoEjNom').firstChild;
   elmText.nodeValue = Evento.target.nodeName;
}

[-, -]

Captura y burbujeo

Un ejemplo que ilustra la diferencia entre permitir la captura de un evento y no hacerlo, y también la acción de cancelar la propagación.

function iniciarRegistro() {
  var elmDIV;
  for (var i=0, s=new Array('A','B','C'); i<s.length; i++) { 
     elmDIV = document.getElementById(s[i]);
     elmDIV.addEventListener('mouseover', registrarEntrada, 1);
     elmDIV.addEventListener('mouseover', registrarDentro, 0);
     elmDIV.addEventListener('mouseout', registrarSalida, 1);
     elmDIV.addEventListener('mouseout', registrarFuera, 0);
     }
}
 
function registrarEntrada(Evento) {
  var elmText = document.getElementById('En'+Evento.currentTarget.id).firstChild;
  elmText.nodeValue = 'El ratón ha entrado en '+Evento.currentTarget.id;
}
 
function registrarSalida(Evento) {
  var elmText = document.getElementById('En'+Evento.currentTarget.id).firstChild;
  elmText.nodeValue = 'El ratón ha salido de '+Evento.currentTarget.id;
}
 
function registrarDentro(Evento) {
  var elmText = document.getElementById('Donde').firstChild;
  elmText.nodeValue = 'El ratón está en '+Evento.currentTarget.id;
  Evento.stopPropagation();
}
 
function registrarFuera(Evento) {
  var elmText = document.getElementById('Donde').firstChild;
  elmText.nodeValue = 'El ratón no está ni en A, ni en B, ni en C';
  Evento.stopPropagation();
}

A

B

C

Envío de eventos

Básico ensayo de envío de eventos. Para apreciar su funcionamiento se debe haber accionado antes el anterior ejemplo.

function simularEvento() {
  var elmDIV = document.getElementById('C');
  var Evento = document.createEvent('MouseEvents');
  var Vista = document.defaultView;
  Evento.initMouseEvent('mouseover',0,0,Vista,0,0,0,0,0,0,0,0,0,0,elmDIV);
  elmDIV.dispatchEvent(Evento);
}