{{APIRef("DOM")}}
Éste capítulo describe el Modelo De Evento DOM de nivel 2 como es implementado por Gecko. La propia interfaz de Evento es descrita, así como las interfaces para el registro de evento sobre los nodos en el DOM, manipuladores y "oyentes" (listeners) de eventos, y varios ejemplos mas extensos que muestran como las varias interfaces de evento se relacionan unas con las otras.
Hay un diagrama excelente que explica claramente las tres fases del flujo de eventos a través del DOM en el DOM Level 3 Events draft.
Event) de DOMLos gestores de eventos pueden estar atados a varios elementos en el DOM. Cuando un evento ocurre, un objeto de evento es dinámicamente creado y pasado secuencialmente a las "escuchas" (listeners) autorizadas para la gestión del evento. La interfaz Event del DOM es entonces accesible por la función de manejo, vía el objeto de evento puesto como el primer (y único) argumento.
Given that we don't list the three ways right here, the sentence is unclear, and is not perfectly right either IMO. -Nickolay There are three ways to attach an event listener to an element. With 2 of those techniques, the event object is passed to the handler function implicitly. The remaining technique requires you to specify the <code>event</code> object as a parameter, which is passed explicitly to the event handler function. El ejemplo siguiente muestra como un objeto de evento es pasado a una función de gestión de evento, y puede llamarse desde otra parecida.
El parámetro "evt" no es pasado en el código de abajo, el objeto de evento es cambiado automáticamente a foo. Todo lo necesario es definir un parámetro en el gestor de evento para recibir el objeto de evento.
function foo(evt) {
// Las funciones de gestión como esta
// dan una referencia implícita del
// evento que toca manejar
// (en este caso se llama "evt").
alert(evt);
}
table_el.onclick = foo;
Este ejemplo es muy simple pero muestra una característica importante de los eventos en el DOM de Gecko, la cual es que en el DOM se accede a los objetos de eventos a través de las funciones de manejo. Entonces al tener una referencia al objeto de evento, se puede llegar a todas las propiedades y métodos descritos en este capítulo.
Para más detalles de como los eventos se mueven dentro del DOM, ver: Ejemplo 5: Propagación de evento
Además del objeto event descrito aquí, el Gecko DOM también proporciona métodos para registrar oyentes de eventos en nodos en el DOM, quitando aquellos oyentes de eventos, y enviando eventos desde el DOM.
Estos y los varios manejos de eventos de elementos HTML o XML son los puntos de entrada principales para los eventos en el DOM. Estos tres métodos se describen en la lista de referencia al elemento.
Puede también pasar la referencia del objeto del evento como un parámetro predefinido, llamado event, a la función que maneja el evento. Esto es muy parecido a la forma en que trabaja this, pero para objetos de eventos, más bien que las referencias del objeto del elemento.
<html>
<head>
<title>Ejemplo de parámetro de objeto de evento</title>
<script type="text/javascript">
function showCoords(event){
alert(
"clientX value: " + event.clientX + "\n" +
"clientY value: " + event.clientY + "\n"
);
}
</script>
</head>
<body onmousedown="showCoords(event)">
<p>Para ver las coordinadas del ratón
haga clic en cualquier lugar de esta página.</p>
</body>
</html>
El parámetro predefinido del objeto event permite pasar tantos parámetros de gestión de evento como sea necesario:
<html>
<head>
<title>Ejemplo de objeto con varios parámetros</title>
<script type="text/javascript">
var par2 = 'hello';
var par3 = 'world!';
function muestraCoords(evt, p2, p3){
alert(
"clienteX value: " + evt.clientX + "\n"
+ "clientY value: " + evt.clientY + "\n"
+ "p2: " + p2 + "\n"
+ "p3: " + p3 + "\n"
);
}
</script>
</head>
<body onmousedown="muestraCoords(event, par2, par3)">
<p>Para ver las coordinadas del ratón
haga clic en cualquier lugar de esta página.</p>
</body>
</html>
<alt> fue pulsada durante el evento.<Ctrl> fue apretada durante el evento.meta tecla fue presionada durante un evento.<shift> fue presionada cuando el evento fue disparado.AbstractView del cual el evento fue generado.DocumentEvent.