El Modelo de Eventos del DOM

Autor Original:Mike Hall URL ORIGINAL :http://www.brainjar.com/dhtml/events/ TITULO ORIGINAL :The DOM Event Model Traducción al castellano:Pedro Palazón Candel URL CASTELLANO :http://kusor.net/traducciones/brainjar.es/events1.es.html

El Modelo de Eventos del DOM

Revisa la recomendación oficial W3C DOM2 Event standard .

Una de las claves para crear páginas web dinámicas es el uso de manejadores de eventos. Esto te permitiría ejecutar el código específico de un script como respuesta a las acciones del usuario o del sistema.

La mayor parte de los eventos se refieren a la Interfaz General de Usuario (GUI) del Navegador, como los movimientos del mouse, clicks de los botones del mouse o pulsaciones de teclas y actualizaciones de campos input de formularios. Éstos son agregados usualmente a un elemento especifico del la página. Otros se refieren a las acciones del navegador, tales como cuando un documento o imágen se ha cargado completamente.

Algunos objetos tienen acciones definidas por defecto para ciertos eventos, como hacer click en un hiperenlace. La acción normal del navegador para dicho evento es cargar la URL asociada a dicho enlace.

En cualquier caso, todos los eventos siguen el mismo modelo. El DOM proporciona métodos para capturar eventos por lo que puedes realizar tus propias acciones en respuesta a ellos. También proporciona un objeto Event que contiene información especifica para un evento dado que puede ser utilizada por tu código para procesar los eventos.

Compatibilidad entre Navegadores Algunos ejemplos en este artículo no funcionarán en Opera debido a errores o a la carencia de soporte en sus implementaciones de CSS y DOM. Otras diferencias entre navegadores son notificadas donde corresponde.

Asignando Manejadores de Eventos
("Event Handlers")

Hay varios modos de fijar la captura de un evento sobre un objeto usando tanto HTML como scripting. En cada caso, asignas una función para manejar el evento específico cuando sucede.

Atributos de las etiquetas HTML

Muchas etiquetas HTML tienen eventos intrínsecos asociados a ellas. Puedes definir el código de un script que debe ser ejecutado cuando uno de esos eventos ocurren usando el nombre del evento como un atributo. Por ejemplo,

<span style="background-color:yellow;"
onmouseover="this.style.backgroundColor='black';this.style.color='white'"
onmouseout="this.style.backgroundColor='yellow';this.style.color=''">
Sample element with mouse event handlers.
</span>

Puedes probarlo con el siguiente texto:

Ejemplo de elemento con manejadores de eventos del mouse.

Ver la especificación W3C HTML 4 standard para encontrar qué eventos están soportados para una etiqueta HTML dada.

Aquí, dos eventos diferentes han sido capturados, mouseover y mouseout. El valor asignado a los atributos correspondientes es una cadena que contiene código JavaScript. Nótese el uso de comillas simples (') para constantes de cadena dentro de comillas dobles (") utilizadas para delimita el valor del atributo.

El código del script para ambos eventos simplemente cambia el color del texto y fondo en el estilo del elemento. La palabra reservada this se refiere al objeto que dispara el evento. Aquí se refiere al elemento SPAN.

Es preciso que antes de que hayas fijado la captura de un evento, asignes una función que debe ser llamada para manipular dicho evento. Puede parecer una contradicción con el ejemplo anterior donde el código del evento es simplemente una serie de sentencias de JavaScript. De cualquier modo, el navegador crea actualmente una función anónima functionpara el manejador conteniendo dichas sentencias.

Puedes ver ésto por tí mismo con otro ejemplo. Haz click en el siguiente texto:

Ejemplo de elemento con un manejador del evento onclick.

Deberías ver un cuadro de alerta con la definición de una función. La definición actual variará dependiendo del navegador pero va a contener una única sentencia, la definida en HTML:

function name(argument_list) {
alert(this.onclick);
}

Ésa se corresponde con el código fijado en el atributo ONCLICK:

<span style="background-color:yellow;"
onclick="alert(this.onclick)">Sample element with an onclick event
handler.</span>
Compatibilidad de Navegadores

Netscape usará el nombre del evento como el nombre de la función y definirá un argumento único, event, que es el objeto Event pasado a todos los manejadores de eventos.

function onclick(event) {
alert(this.onclick);
}

Internet Explorer utiliza el nombre de función "anonymous." No sigue el modelo de eventos estándar por lo que ningún argumento está definido (esto será cubierto más adelante).

function anonymous() {
alert(this.onclick);
}

Opera utiliza el nombre de función "anonymous" y define un argumento Event.

 function anonymous(event) {
alert(this.onclick);
}

Scripting

También puedes asignar manejadores de eventos a los elementos en el DOM utilizando client-side scripting, ( técnicas de script en cliente). Como otros atributos de los elementos, los eventos están representados como propiedades de el objeto elemento por lo que puedes fijar su valor  como con cualquier otro atributo.

La principal diferencia está en que al contrario que la mayoría de atributos, que toman un valor de cadena, los manejadores de eventos deben fijarse usando una función de reference.Aquí hay un ejemplo,

Ejemplo de elemento con manejadores de eventos del mouse.

y el código que hay detrás de él:

<span id="sample1" style="background-color:yellow;">Sample element with
mouse event handlers.</span>

... JavaScript code ...

function highlight(event) {

this.style.backgroundColor='black';
this.style.color='white';
}

function normal(event) {

this.style.backgroundColor='yellow';
this.style.color='';
}

document.getElementById('sample1').onmouseover = highlight;
document.getElementById('sample1').onmouseout = normal;

Nótese que la propiedad onmouseover se fija en highlight, e.d., el nombre de la función sin paréntesis. Ésta representa el objeto Function para highlight que es lo que la propiedad del evento espera: una referencia a la función a llamar cuando el evento es disparado.

Si highlight() ha sido utilizado en su lugar, el navegador podría llamar la función y asignarle cualquier valor que devolviese como manejador de eventos. En este caso en particular, podría darse un error en la ejecución de la función porque this no tiene significado en el contexto dado.

Siguiente

BrainJar.com · ©1999-2002 by Mike Hall 
Publicado con autorización explícita del autor.
Puedes encontrar más artículos y tutoriales relacionados con dhtml en esta web.
Valid XHTML |Valid CSS