Los
eventos son el mecanismo que usa el explorador para llamar
y ejecutar las funciones incluidas en una página HTML.
Tanto Netscape como Microsoft incluyen este objeto en sus navegadores,
si bien lo hacen de manera bastante diferente uno del otro,
siendo Internet Explorer el que permite un mayor aprovechamiento
y posibilidades de programación. Con DHTML todos los
elementos de la página web pueden tener asociado uno
o mas eventos. Existe un grupo de eventos que son disparados
por las acciones del usuario como mover el ratón, pulsar
una tecla, picar una opción del menú, etc. También
existe otro grupo de eventos que responden a las acciones del
navegador como son el l finalizar de cargar una página,
o cuando se va a salir de ella o al terminar de cargar una
imagen o cuando se produce un error de ejecución del
código. Por último existe un par de eventos bastante
imprescindibles para la realización de efectos animados
en las páginas, son los eventos temporizados, eventos
asociados al reloj del sistema que nos permite ejecutar una
determinada acción de manera repetida cada cierto intervalo
de tiempo.
A la hora de vincular eventos a los objetos HTML de una página
hemos de conocer ciertos principios previos. En primer lugar los
elementos de la página disparan los eventos independientemente
de que nosotros le asignemos una función manejadora, es
decir, cada evento posee un manejador predeterminado, así cuando
picamos sobre un enlace el navegador lee el atributo href y nos
lleva a la página apuntada por él, algo parecido
ocurre con los botones Submit de los formularios. Otras veces ese
comportamiento por defecto no hace absolutamente nada. Pero hemos
de tener esto en cuenta y si queremos que esa acción predeterminada
no se ejecute lo habitual es seguir el manejador del evento con
la sentencia return false, o asignar el valor false a la propiedad
returnValue del evento, aunque este método sólo vale
para IE.
Otra cosa a tener muy en cuenta es la promoción de eventos.
Este es un efecto que se observa cuando se produce un evento en
un elemento anidado dentro de otro, al producirse un evento en
el objeto interno este evento asciende al elemento contenedor hasta
llegar al elemento superior de este jerarquía. Por ejemplo:
<p id="Externo" onmouseover="alert(this.id)">
Y aquí el elemento anidado
<
span id="interno" onmouseover="alert(this.id)">
<
b>elemento interno</b></span>eso está fuera</p>
Y aquí el elemento anidado elemento interno eso está fuera
Esta es un elemento span anidado en un párrafo, si pasamos
el ratón sobre el span el evento onmouseover del ratón
actúa en primer lugar en el span, mostrando una ventana
con su identificador (Interno), pero luego asciende hasta el
elemento P provocando la acción vinculada en éste,
mostrar una ventana con su identficador (Externo). A veces esto
viene bien y otras provoca efectos indeseados. Para cortar esta
ascensión del evento se asigna el valor true a la propiedad
event.cancelBubble.
|
