You are on page 1of 24

Captulo 15 Eventos

En la programacin tradicional, las aplicaciones se ejecutan secuencialmente de


principio a fin para producir sus resultados. Sin embargo, en la actualidad el modelo
predominante es el de la programacin basada en eventos. Los scripts y programas
esperan sin realizar ninguna tarea hasta que se produzca un evento. Una vez
producido, ejecutan alguna tarea asociada a la aparicin de ese evento y cuando
concluye, el script o programa vuelve al estado de espera.

JavaScript permite realizar scripts con ambos mtodos de programacin: secuencial y


basada en eventos. Los eventos de JavaScript permiten la interaccin entre las
aplicaciones JavaScript y los usuarios. Cada vez que se pulsa un botn, se produce un
evento. Cada vez que se pulsa una tecla, tambin se produce un evento. No obstante,
para que se produzca un evento no es obligatorio que intervenga el usuario, ya que por
ejemplo, cada vez que se carga una pgina, tambin se produce un evento.

El nivel 1 de DOM no incluye especificaciones relativas a los eventos JavaScript. El


nivel 2 de DOM incluye ciertos aspectos relacionados con los eventos y el nivel 3 de
DOM incluye la especificacin completa de los eventos de JavaScript.
Desafortunadamente, la especificacin de nivel 3 de DOM se public en el ao 2004,
ms de diez aos despus de que los primeros navegadores incluyeran los eventos.

Por este motivo, muchas de las propiedades y mtodos actuales relacionados con los
eventos son incompatibles con los de DOM. De hecho, navegadores como Internet
Explorer tratan los eventos siguiendo su propio modelo incompatible con el estndar.

El modelo simple de eventos se introdujo en la versin 4 del estndar HTML y se


considera parte del nivel ms bsico de DOM. Aunque sus caractersticas son
limitadas, es el nico modelo que es compatible con todos los navegadores y por tanto,
el nico que permite crear aplicaciones que funcionan de la misma manera en todos
los navegadores.

15.1 Tipos de eventos


Cada elemento XHTML tiene definida su propia lista de posibles eventos que se le
pueden asignar. Un mismo tipo de evento (por ejemplo, pinchar el botn izquierdo del
ratn) puede estar definido para varios elementos XHTML y un mismo elemento
XHTML puede tener asociados diferentes eventos.

El nombre de los eventos se construye mediante el prefijo on, seguido del nombre en
ingls de la accin asociada al evento. As, el evento de pinchar un elemento con el
ratn se denomina onclick y el evento asociado a la accin de mover el ratn se
denomina onmousemove.

La siguiente tabla resume los eventos ms importantes definidos por JavaScript:


Elementos para los que est
Evento Descripcin
definido

<button>, <input>, <label>,


onblur Un elemento pierde el foco
<select>, <textarea>, <body>

onchange Un elemento ha sido modificado <input>, <select>, <textarea>

onclick Pulsar y soltar el ratn Todos los elementos

Pulsar dos veces seguidas con


ondblclick Todos los elementos
el ratn

<button>, <input>, <label>,


onfocus Un elemento obtiene el foco
<select>, <textarea>, <body>

Elementos de formulario y
onkeydown Pulsar una tecla y no soltarla
<body>

Elementos de formulario y
onkeypress Pulsar una tecla
<body>

Elementos de formulario y
onkeyup Soltar una tecla pulsada
<body>

onload Pgina cargada completamente <body>

Pulsar un botn del ratn y no


onmousedown Todos los elementos
soltarlo

onmousemove Mover el ratn Todos los elementos

onmouseout El ratn "sale" del elemento Todos los elementos

onmouseover El ratn "entra" en el elemento Todos los elementos

onmouseup Soltar el botn del ratn Todos los elementos

onreset Inicializar el formulario <form>

Modificar el tamao de la
onresize <body>
ventana

onselect Seleccionar un texto <input>, <textarea>

onsubmit Enviar el formulario <form>


Elementos para los que est
Evento Descripcin
definido

Se abandona la pgina, por


onunload <body>
ejemplo al cerrar el navegador

Los eventos ms utilizados en las aplicaciones web tradicionales son onload para
esperar a que se cargue la pgina por completo, los eventos onclick, onmouseover,
onmouseout para controlar el ratn y onsubmit para controlar el envo de los
formularios.

Algunos eventos de la tabla anterior (onclick, onkeydown, onkeypress, onreset,


onsubmit) permiten evitar la "accin por defecto" de ese evento. Ms adelante se
muestra en detalle este comportamiento, que puede resultar muy til en algunas
tcnicas de programacin.

Las acciones tpicas que realiza un usuario en una pgina web pueden dar lugar a una
sucesin de eventos. Al pulsar por ejemplo sobre un botn de tipo <input
type="submit"> se desencadenan los eventos onmousedown, onclick, onmouseup y
onsubmit de forma consecutiva.

15.1.1 Manejadores de eventos

Un evento de JavaScript por s mismo carece de utilidad. Para que los eventos
resulten tiles, se deben asociar funciones o cdigo JavaScript a cada evento. De esta
forma, cuando se produce un evento se ejecuta el cdigo indicado, por lo que la
aplicacin puede responder ante cualquier evento que se produzca durante su
ejecucin.

Las funciones o cdigo JavaScript que se definen para cada evento se denominan
manejador de eventos (event handlers en ingls) y como JavaScript es un lenguaje
muy flexible, existen varias formas diferentes de indicar los manejadores:

Manejadores como atributos de los elementos XHTML.


Manejadores como funciones JavaScript externas.
Manejadores "semnticos".

15.1.1.1 Manejadores como atributos XHTML

Se trata del mtodo ms sencillo y a la vez menos profesional de indicar el cdigo


JavaScript que se debe ejecutar cuando se produzca un evento. En este caso, el cdigo
se incluye en un atributo del propio elemento XHTML. En el siguiente ejemplo, se
quiere mostrar un mensaje cuando el usuario pinche con el ratn sobre un botn:
<input type="button" value="Pinchame y vers"
onclick="console.log('Gracias por pinchar');" />

En este mtodo, se definen atributos XHTML con el mismo nombre que los eventos
que se quieren manejar. El ejemplo anterior slo quiere controlar el evento de pinchar
con el ratn, cuyo nombre es onclick. As, el elemento XHTML para el que se quiere
definir este evento, debe incluir un atributo llamado onclick.

El contenido del atributo es una cadena de texto que contiene todas las instrucciones
JavaScript que se ejecutan cuando se produce el evento. En este caso, el cdigo
JavaScript es muy sencillo (console.log('Gracias por pinchar');), ya que
solamente se trata de mostrar un mensaje.

En este otro ejemplo, cuando el usuario pincha sobre el elemento <div> se muestra un
mensaje y cuando el usuario pasa el ratn por encima del elemento, se muestra otro
mensaje:

<div onclick="console.log('Has pinchado con el ratn');"


onmouseover="console.log('Acabas de pasar el ratn por encima');">

Puedes pinchar sobre este elemento o simplemente pasar el ratn por


encima</div>

Este otro ejemplo incluye una de las instrucciones ms utilizadas en las aplicaciones
JavaScript ms antiguas:

<body onload="console.log('La pgina se ha cargado completamente');">

...</body>

El mensaje anterior se muestra despus de que la pgina se haya cargado


completamente, es decir, despus de que se haya descargado su cdigo HTML, sus
imgenes y cualquier otro objeto incluido en la pgina.

El evento onload es uno de los ms utilizados ya que, como se vio en el captulo de


DOM, las funciones que permiten acceder y manipular los nodos del rbol DOM
solamente estn disponibles cuando la pgina se ha cargado completamente.

15.1.1.2 Manejadores de eventos y variable this

JavaScript define una variable especial llamada this que se crea automticamente y
que se emplea en algunas tcnicas avanzadas de programacin. En los eventos, se
puede utilizar la variable this para referirse al elemento XHTML que ha provocado
el evento. Esta variable es muy til para ejemplos como el siguiente:
Cuando el usuario pasa el ratn por encima del <div>, el color del borde se muestra
de color negro. Cuando el ratn sale del <div>, se vuelve a mostrar el borde con el
color gris claro original.

<div id="contenidos" style="width:150px; height:60px; border:thin solid


silver">

Seccin de contenidos...</div>

Si no se utiliza la variable this, el cdigo necesario para modificar el color de los


bordes, sera el siguiente:

<div id="contenidos" style="width:150px; height:60px; border:thin solid


silver"
onmouseover="document.getElementById('contenidos').style.borderColor=
'black';"
onmouseout="document.getElementById('contenidos').style.borderColor='
silver';">

Seccin de contenidos...</div>

El cdigo anterior es demasiado largo y demasiado propenso a cometer errores.


Dentro del cdigo de un evento, JavaScript crea automticamente la variable this,
que hace referencia al elemento XHTML que ha provocado el evento. As, el ejemplo
anterior se puede reescribir de la siguiente manera:

<div id="contenidos" style="width:150px; height:60px; border:thin solid


silver" onmouseover="this.style.borderColor='black';"
onmouseout="this.style.borderColor='silver';">

Seccin de contenidos...</div>

El cdigo anterior es mucho ms compacto, ms fcil de leer y de escribir y sigue


funcionando correctamente aunque se modifique el valor del atributo id del <div>.

15.1.1.3 Manejadores de eventos como funciones externas

La definicin de manejadores de eventos en los atributos XHTML es un mtodo


sencillo pero poco aconsejable para tratar con los eventos en JavaScript. El principal
inconveniente es que se complica en exceso en cuanto se aaden algunas pocas
instrucciones, por lo que solamente es recomendable para los casos ms sencillos.

Cuando el cdigo de la funcin manejadora es ms complejo, como por ejemplo la


validacin de un formulario, es aconsejable agrupar todo el cdigo JavaScript en una
funcin externa que se invoca desde el cdigo XHTML cuando se produce el evento.
De esta forma, el siguiente ejemplo:

<input type="button" value="Pinchame y vers"


onclick="console.log('Gracias por pinchar');" />

Se puede transformar en:

function muestraMensaje() {

console.log('Gracias por pinchar');}

<input type="button" value="Pinchame y vers"


onclick="muestraMensaje()" />

En las funciones externas no es posible utilizar la variable this de la misma forma


que en los manejadores insertados en los atributos XHTML. Por tanto, es necesario
pasar la variable this como parmetro a la funcin manejadora:

function resalta(elemento) {

switch(elemento.style.borderColor) {

case 'silver':

case 'silver silver silver silver':

case '#c0c0c0':

elemento.style.borderColor = 'black';

break;

case 'black':

case 'black black black black':

case '#000000':

elemento.style.borderColor = 'silver';

break;

}}

<div style="padding: .2em; width: 150px; height: 60px; border: thin solid
silver" onmouseover="resalta(this)" onmouseout="resalta(this)">

Seccin de contenidos...</div>

En el ejemplo anterior, a la funcin externa se le pasa el parmetro this, que dentro


de la funcin se denomina elemento. Al pasar this como parmetro, es posible
acceder de forma directa desde la funcin externa a las propiedades del elemento que
ha provocado el evento.

Por otra parte, el ejemplo anterior se complica por la forma en la que los distintos
navegadores almacenan el valor de la propiedad borderColor. Mientras que Firefox
almacena (en caso de que los cuatro bordes coincidan en color) el valor simple black,
Internet Explorer lo almacena como black black black black y Opera almacena su
representacin hexadecimal #000000.

15.1.1.4 Manejadores de eventos semnticos

Utilizar los atributos XHTML o las funciones externas para aadir manejadores de
eventos tiene un grave inconveniente: "ensucian" el cdigo XHTML de la pgina.

Como es conocido, al crear pginas web se recomienda separar los contenidos


(XHTML) de la presentacin (CSS). En lo posible, tambin se recomienda separar los
contenidos (XHTML) de la programacin (JavaScript). Mezclar JavaScript y XHTML
complica excesivamente el cdigo fuente de la pgina, dificulta su mantenimiento y
reduce la semntica del documento final producido.

Afortunadamente, existe un mtodo alternativo para definir los manejadores de


eventos de JavaScript. Esta tcnica consiste en asignar las funciones externas
mediante las propiedades DOM de los elementos XHTML. As, el siguiente ejemplo:

<input id="pinchable" type="button" value="Pinchame y vers"


onclick="console.log('Gracias por pinchar');" />

Se puede transformar en:

function muestraMensaje() {

console.log('Gracias por pinchar');}

document.getElementById("pinchable").onclick = muestraMensaje;

<input id="pinchable" type="button" value="Pinchame y vers" />

El cdigo XHTML resultante es muy "limpio", ya que no se mezcla con el cdigo


JavaScript. La tcnica de los manejadores semnticos consiste en:

1. Asignar un identificador nico al elemento XHTML mediante el atributo id.


2. Crear una funcin de JavaScript encargada de manejar el evento.
3. Asignar la funcin a un evento concreto del elemento XHTML mediante DOM.

Otra ventaja adicional de esta tcnica es que las funciones externas pueden utilizar la
variable this referida al elemento que original el evento.
Asignar la funcin manejadora mediante DOM es un proceso que requiere una
explicacin detallada. En primer lugar, se obtiene la referencia del elemento al que se
va a asignar el manejador:

document.getElementById("pinchable");

A continuacin, se asigna la funcin externa al evento deseado mediante una


propiedad del elemento con el mismo nombre del evento:

document.getElementById("pinchable").onclick = ...

Por ltimo, se asigna la funcin externa. Como ya se ha comentado en captulos


anteriores, lo ms importante (y la causa ms comn de errores) es indicar solamente
el nombre de la funcin, es decir, prescindir de los parntesis al asignar la funcin:

document.getElementById("pinchable").onclick = muestraMensaje;

Si se aaden los parntesis al final, en realidad se est invocando la funcin y


asignando el valor devuelto por la funcin al evento onclick de elemento.

El nico inconveniente de este mtodo es que los manejadores se asignan mediante


las funciones DOM, que solamente se pueden utilizar despus de que la pgina se ha
cargado completamente. De esta forma, para que la asignacin de los manejadores no
resulte errnea, es necesario asegurarse de que la pgina ya se ha cargado.

Una de las formas ms sencillas de asegurar que cierto cdigo se va a ejecutar


despus de que la pgina se cargue por completo es utilizar el evento onload:

window.onload = function() {

document.getElementById("pinchable").onclick = muestraMensaje;}

La tcnica anterior utiliza una funcin annima para asignar algunas instrucciones al
evento onload de la pgina (en este caso se ha establecido mediante el objeto window).
De esta forma, para asegurar que cierto cdigo se va a ejecutar despus de que la
pgina se haya cargado, slo es necesario incluirlo en el interior de la siguiente
construccin:

window.onload = function() {

...}

15.2 El flujo de eventos


Adems de los eventos bsicos que se han visto, los navegadores incluyen un
mecanismo relacionado llamado flujo de eventos o "event flow". El flujo de eventos
permite que varios elementos diferentes puedan responder a un mismo evento.

Si en una pgina HTML se define un elemento <div> con un botn en su interior,


cuando el usuario pulsa sobre el botn, el navegador permite asignar una funcin de
respuesta al botn, otra funcin de respuesta al <div> que lo contiene y otra funcin
de respuesta a la pgina completa. De esta forma, un solo evento (la pulsacin de un
botn) provoca la respuesta de tres elementos de la pgina (incluyendo la propia
pgina).

El orden en el que se ejecutan los eventos asignados a cada elemento de la pgina es


lo que constituye el flujo de eventos. Adems, existen muchas diferencias en el flujo
de eventos de cada navegador.

15.2.1 Event bubbling

En este modelo de flujo de eventos, el orden que se sigue es desde el elemento ms


especfico hasta el elemento menos especfico.

En los prximos ejemplos se emplea la siguiente pgina HTML:

<html onclick="procesaEvento()">

<head><title>Ejemplo de flujo de eventos</title></head>

<body onclick="procesaEvento()">

<div onclick="procesaEvento()">Pincha aqui</div>

</body></html>

Cuando se pulsa sobre el texto "Pincha aqu" que se encuentra dentro del <div>, se
ejecutan los siguientes eventos en el orden que muestra el siguiente esquema:

Figura 15.1 Esquema del funcionamiento del "event bubbling"


El primer evento que se tiene en cuenta es el generado por el <div> que contiene el
mensaje. A continuacin el navegador recorre los ascendentes del elemento hasta que
alcanza el nivel superior, que es el elemento document.

Este modelo de flujo de eventos es el que incluye el navegador Internet Explorer. Los
navegadores de la familia Mozilla (por ejemplo Firefox) tambin soportan este
modelo, pero ligeramente modificado. El anterior ejemplo en un navegador de la
familia Mozilla presenta el siguiente flujo de eventos:

Figura 15.2 Esquema del funcionamiento del "event bubbling" en los navegadores de
Mozilla

Aunque el objeto window no es parte del DOM, el flujo de eventos implementado por
Mozilla recorre los ascendentes del elemento hasta el mismo objeto window,
aadiendo por tanto un evento ms al modelo de Internet Explorer.

15.2.2 Event capturing

En ese otro modelo, el flujo de eventos se define desde el elemento menos especfico
hasta el elemento ms especfico. En otras palabras, el mecanismo definido es
justamente el contrario al "event bubbling". Este modelo lo utilizaba el desaparecido
navegador Netscape Navigator 4.0.

15.2.3 Eventos DOM

El flujo de eventos definido en la especificacin DOM soporta tanto el bubbling como


el capturing, pero el "event capturing" se ejecuta en primer lugar. Los dos flujos de
eventos recorren todos los objetos DOM desde el objeto document hasta el elemento
ms especfico y viceversa. Adems, la mayora de navegadores que implementan los
estndares, continan el flujo hasta el objeto window.

El flujo de eventos DOM del ejemplo anterior se muestra a continuacin:


Figura 15.3 Esquema del flujo de eventos del modelo DOM

El elemento ms especfico del flujo de eventos no es el <div> que desencadena la


ejecucin de los eventos, sino el nodo de tipo TextNode que contiene el <div>. El
hecho de combinar los dos flujos de eventos, provoca que el nodo ms especfico
pueda ejecutar dos eventos de forma consecutiva.

15.3 Handlers y listeners


En las secciones anteriores se introdujo el concepto de "event handler" o manejador
de eventos, que son las funciones que responden a los eventos que se producen.
Adems, se vieron tres formas de definir los manejadores de eventos para el modelo
bsico de eventos:

1. Cdigo JavaScript dentro de un atributo del propio elemento HTML


2. Definicin del evento en el propio elemento HTML pero el manejador es una funcin externa
3. Manejadores semnticos asignados mediante DOM sin necesidad de modificar el cdigo
HTML de la pgina

Cualquiera de estos tres modelos funciona correctamente en todos los navegadores


disponibles en la actualidad. Las diferencias entre navegadores surgen cuando se
define ms de un manejador de eventos para un mismo evento de un elemento. La
forma de asignar y "desasignar" manejadores mltiples depende completamente del
navegador utilizado.

15.3.1 Manejadores de eventos de DOM

La especificacin DOM define otros dos mtodos similares a los disponibles para
Internet Explorer y denominados addEventListener() y removeEventListener()
para asociar y desasociar manejadores de eventos.

La principal diferencia entre estos mtodos y los anteriores es que en este caso se
requieren tres parmetros: el nombre del "event listener", una referencia a la funcin
encargada de procesar el evento y el tipo de flujo de eventos al que se aplica.

El primer argumento no es el nombre completo del evento como sucede en el modelo


de Internet Explorer, sino que se debe eliminar el prefijo on. En otras palabras, si en
Internet Explorer se utilizaba el nombre onclick, ahora se debe utilizar click.

Si el tercer parmetro es true, el manejador se emplea en la fase de capture. Si el


tercer parmetro es false, el manejador se asocia a la fase de bubbling.
A continuacin, se muestran los ejemplos anteriores empleando los mtodos definidos
por DOM:

function muestraMensaje() {

console.log("Has pulsado el ratn");}var elDiv =


document.getElementById("div_principal");

elDiv.addEventListener("click", muestraMensaje, false);

// Ms adelante se decide desasociar la funcin al evento

elDiv.removeEventListener("click", muestraMensaje, false);

Asociando mltiples funciones a un nico evento:

function muestraMensaje() {

console.log("Has pulsado el ratn");}

function muestraOtroMensaje() {

console.log("Has pulsado el ratn y por eso se muestran estos


mensajes");}

var elDiv = document.getElementById("div_principal");

elDiv.addEventListener("click", muestraMensaje, true);

elDiv.addEventListener("click", muestraOtroMensaje, true);

Si se asocia una funcin a un flujo de eventos determinado, esa funcin slo se puede
desasociar en el mismo tipo de flujo de eventos. Si se considera el siguiente ejemplo:

function muestraMensaje() {

console.log("Has pulsado el ratn");}

var elDiv = document.getElementById("div_principal");

elDiv.addEventListener("click", muestraMensaje, false);

// Ms adelante se decide desasociar la funcin al evento

elDiv.removeEventListener("click", muestraMensaje, true);

La ltima instruccin intenta desasociar la funcin muestraMensaje en el flujo de


eventos de capture, mientras que al asociarla, se indic el flujo de eventos de
bubbling. Aunque la ejecucin de la aplicacin no se detiene y no se produce ningn
error, la ltima instruccin no tiene ningn efecto.
15.4 El objeto event
Cuando se produce un evento, no es suficiente con asignarle una funcin responsable
de procesar ese evento. Normalmente, la funcin que procesa el evento necesita
informacin relativa al evento producido: la tecla que se ha pulsado, la posicin del
ratn, el elemento que ha producido el evento, etc.

El objeto event es el mecanismo definido por los navegadores para proporcionar toda
esa informacin. Se trata de un objeto que se crea automticamente cuando se produce
un evento y que se destruye de forma automtica cuando se han ejecutado todas las
funciones asignadas al evento.

El estndar DOM especifica que el objeto event es el nico parmetro que se debe
pasar a las funciones encargadas de procesar los eventos. Por tanto, en los
navegadores que siguen los estndares, se puede acceder al objeto event a travs del
array de los argumentos de la funcin:

elDiv.onclick = function() {

var elEvento = arguments[0];}

Tambin es posible indicar el nombre argumento de forma explcita:

elDiv.onclick = function(event) {

...}

El funcionamiento de los navegadores que siguen los estndares puede parecer


"mgico", ya que en la declaracin de la funcin se indica que tiene un parmetro,
pero en la aplicacin no se pasa ningn parmetro a esa funcin. En realidad, los
navegadores que siguen los estndares crean automticamente ese parmetro y lo
pasan siempre a la funcin encargada de manejar el evento.

15.4.1 Propiedades y mtodos

A pesar de que el mecanismo definido por los navegadores para el objeto event es
similar, existen numerosas diferencias en cuanto las propiedades y mtodos del
objeto.

15.4.1.1 Propiedades definidas por DOM

La siguiente tabla recoge las propiedades definidas para el objeto event en los
navegadores que siguen los estndares:

Propiedad/Mtodo Devuelve Descripcin


Propiedad/Mtodo Devuelve Descripcin

Devuelve true si se ha pulsado la tecla ALT


altKey Boolean
y false en otro caso

Indica si el evento pertenece al flujo de


bubbles Boolean
eventos de bubbling

El botn del ratn que ha sido pulsado.


Posibles valores: 0 Ningn botn pulsado
1 Se ha pulsado el botn izquierdo2 Se
ha pulsado el botn derecho3 Se pulsan a la
Nmero
button vez el botn izquierdo y el derecho4 Se ha
entero
pulsado el botn central5 Se pulsan a la vez
el botn izquierdo y el central6 Se pulsan
a la vez el botn derecho y el central7`
Se pulsan a la vez los 3 botones

cancelable Boolean Indica si el evento se puede cancelar

Indica si se ha detenido el flujo de eventos


cancelBubble Boolean
de tipo bubbling

Nmero El cdigo unicode del carcter


charCode
entero correspondiente a la tecla pulsada

Nmero Coordenada X de la posicin del ratn respecto


clientX
entero del rea visible de la ventana

Nmero Coordenada Y de la posicin del ratn respecto


clientY
entero del rea visible de la ventana

Devuelve true si se ha pulsado la tecla CTRL


ctrlKey Boolean
y false en otro caso

currentTarget Element El elemento que es el objetivo del evento

Nmero El nmero de veces que se han pulsado los


detail
entero botones del ratn

La fase a la que pertenece el evento: 0 Fase


Nmero
eventPhase capturing 1 En el elemento destino 2 Fase
entero
bubbling

isChar Boolean Indica si la tecla pulsada corresponde a un


Propiedad/Mtodo Devuelve Descripcin

carcter

Nmero
keyCode Indica el cdigo numrico de la tecla pulsada
entero

Nmero Devuelve true si se ha pulsado la tecla META


metaKey
entero y false en otro caso

Nmero Coordenada X de la posicin del ratn respecto


pageX
entero de la pgina

Nmero Coordenada Y de la posicin del ratn respecto


pageY
entero de la pgina

Se emplea para cancelar la accin predefinida


preventDefault() Funcin
del evento

El elemento que es el objetivo secundario del


relatedTarget Element
evento (relacionado con los eventos de ratn)

Nmero Coordenada X de la posicin del ratn respecto


screenX
entero de la pantalla completa

Nmero Coordenada Y de la posicin del ratn respecto


screenY
entero de la pantalla completa

Devuelve true si se ha pulsado la tecla SHIFT


shiftKey Boolean
y false en otro caso

Se emplea para detener el flujo de eventos de


stopPropagation() Funcin
tipo bubbling

target Element El elemento que origina el evento

La fecha y hora en la que se ha producido el


timeStamp Nmero
evento

Cadena
type El nombre del evento
de texto

Al contrario de lo que sucede con Internet Explorer, la mayora de propiedades del


objeto event de DOM son de slo lectura. En concreto, solamente las siguientes
propiedades son de lectura y escritura: altKey, button y keyCode.
La tecla META es una tecla especial que se encuentra en algunos teclados de
ordenadores muy antiguos. Actualmente, en los ordenadores tipo PC se asimila a la
tecla Alt o a la tecla de Windows, mientras que en los ordenadores tipo Mac se
asimila a la tecla Command.

15.4.2 Similitudes y diferencias entre navegadores

15.4.2.1 Similitudes

En ambos casos se utiliza la propiedad type para obtener el tipo de evento que se trata:

function procesaEvento(elEvento) {

if(elEvento.type == "click") {

console.log("Has pulsado el raton");

else if(elEvento.type == "mouseover") {

console.log("Has movido el raton");

}}

elDiv.onclick = procesaEvento;

elDiv.onmouseover = procesaEvento;

Mientras que el manejador del evento incluye el prefijo on en su nombre, el tipo de


evento devuelto por la propiedad type prescinde de ese prefijo. Por eso en el ejemplo
anterior se compara su valor con click y mouseover y no con onclick y
onmouseover.

Otra similitud es el uso de la propiedad keyCode para obtener el cdigo


correspondiente al carcter de la tecla que se ha pulsado. La tecla pulsada no siempre
representa un carcter alfanumrico. Cuando se pulsa la tecla ENTER por ejemplo, se
obtiene el cdigo 13. La barra espaciadora se corresponde con el cdigo 32 y la tecla
de borrado tiene un cdigo igual a 8.

Una forma ms inmediata de comprobar si se han pulsado algunas teclas especiales,


es utilizar las propiedades shiftKey, altKey y ctrlKey.

Para obtener la posicin del ratn respecto de la parte visible de la ventana, se


emplean las propiedades clientX y clientY. De la misma forma, para obtener la
posicin del puntero del ratn respecto de la pantalla completa, se emplean las
propiedades screenX y screenY.
15.4.2.2 Diferencias

Una de las principales diferencias es la forma en la que se obtiene el elemento que


origina el evento. Si un elemento <div> tiene asignado un evento onclick, al pulsar
con el ratn el interior del <div> se origina un evento cuyo objetivo es el elemento
<div>.

// Internet Explorervar objetivo = elEvento.srcElement;

// Navegadores que siguen los estandaresvar objetivo = elEvento.target;

Otra diferencia importante es la relativa a la obtencin del carcter correspondiente a


la tecla pulsada. Cada tecla pulsada tiene asociados dos cdigos diferentes: el primero
es el cdigo de la tecla que ha sido presionada y el otro cdigo es el que se refiere al
carcter pulsado.

El primer cdigo es un cdigo de tecla interno para JavaScript. El segundo cdigo


coincide con el cdigo ASCII del carcter. De esta forma, la letra a tiene un cdigo
interno igual a 65 y un cdigo ASCII de 97. Por otro lado, la letra A tiene un cdigo
interno tambin de 65 y un cdigo ASCII de 95.

En Internet Explorer, el contenido de la propiedad keyCode depende de cada evento.


En los eventos de "pulsacin de teclas" (onkeyup y onkeydown) su valor es igual al
cdigo interno. En los eventos de "escribir con teclas" (onkeypress) su valor es igual
al cdigo ASCII del carcter pulsado.

Por el contrario, en los navegadores que siguen los estndares la propiedad keyCode
es igual al cdigo interno en los eventos de "pulsacin de teclas" (onkeyup y
onkeydown) y es igual a 0 en los eventos de "escribir con teclas" (onkeypress).

En la prctica, esto supone que en los eventos onkeyup y onkeydown se puede utilizar
la misma propiedad en todos los navegadores:

function manejador(elEvento) {

var evento = elEvento || window.event;

console.log("["+evento.type+"] El cdigo de la tecla pulsada es " +


evento.keyCode);}

document.onkeyup = manejador;

document.onkeydown = manejador;

En este caso, si se carga la pgina en cualquier navegador y se pulsa por ejemplo la


tecla a, se muestra el siguiente mensaje:
Figura 15.4 Mensaje mostrado en el navegador Firefox

La gran diferencia se produce al intentar obtener el carcter que se ha pulsado, en este


caso la letra a. Para obtener la letra, en primer lugar se debe obtener su cdigo ASCII.
Como se ha comentado, en Internet Explorer el valor de la propiedad keyCode en el
evento onkeypress es igual al carcter ASCII:

function manejador() {

var evento = window.event;

// Internet Explorer

var codigo = evento.keyCode;

document.onkeypress = manejador;

Sin embargo, en los navegadores que no son Internet Explorer, el cdigo anterior es
igual a 0 para cualquier tecla pulsada. En estos navegadores que siguen los estndares,
se debe utilizar la propiedad charCode, que devuelve el cdigo de la tecla pulsada,
pero solo para el evento onkeypress:

function manejador(elEvento) {

var evento = elEvento;

// Navegadores que siguen los estndares

var codigo = evento.charCode;

document.onkeypress = manejador;

Una vez obtenido el cdigo en cada navegador, se debe utilizar la funcin


String.fromCharCode() para obtener el carcter cuyo cdigo ASCII se pasa como
parmetro. Por tanto, la solucin completa para obtener la tecla pulsada en cualquier
navegador es la siguiente:

function manejador(elEvento) {

var evento = elEvento || window.event;


var codigo = evento.charCode || evento.keyCode;

var caracter = String.fromCharCode(codigo);}

document.onkeypress = manejador;

Una de las propiedades ms interesantes es la posibilidad de impedir que se complete


el comportamiento normal de un evento. En otras palabras, con JavaScript es posible
no mostrar ningn carcter cuando se pulsa una tecla, no enviar un formulario despus
de pulsar el botn de envo, no cargar ninguna pgina al pulsar un enlace, etc. El
mtodo avanzado de impedir que un evento ejecute su accin asociada depende de
cada navegador:

// Navegadores que siguen los estandares

elEvento.preventDefault();

En el modelo bsico de eventos tambin es posible impedir el comportamiento por


defecto de algunos eventos. Si por ejemplo en un elemento <textarea> se indica el
siguiente manejador de eventos:

<textarea onkeypress="return false;"></textarea>

En el <textarea> anterior no ser posible escribir ningn carcter, ya que el


manejador de eventos devuelve false y ese es el valor necesario para impedir que se
termine de ejecutar el evento y por tanto para evitar que la letra se escriba.

As, es posible definir manejadores de eventos que devuelvan true o false en


funcin de algunos parmetros. Por ejemplo se puede disear un limitador del nmero
de caracteres que se pueden escribir en un <textarea>:

function limita(maximoCaracteres) {

var elemento = document.getElementById("texto");

if(elemento.value.length >= maximoCaracteres ) {

return false;

else {

return true;

}}

<textarea id="texto" onkeypress="return limita(100);"></textarea>


El funcionamiento del ejemplo anterior se detalla a continuacin:

1. Se utiliza el evento onkeypress para controlar si la tecla se escribe o no.


2. En el manejador del evento se devuelve el valor devuelto por la funcin externa limita()
a la que se pasa como parmetro el valor 100.
3. Si el valor devuelto por limita() es true, el evento se produce de forma normal y el
carcter se escribe en el <textarea>. Si el valor devuelto por limita() es false, el
evento no se produce y por tanto el carcter no se escribe en el <textarea>.
4. La funcin limita() devuelve true o false despus de comprobar si el nmero de
caracteres del <textarea> es superior o inferior al mximo nmero de caracteres que se
le ha pasado como parmetro.

El objeto event tambin permite detener completamente la ejecucin del flujo normal
de eventos:

// Navegadores que siguen los estandares

elEvento.stopPropagation();

Al detener el flujo de eventos pendientes, se invalidan y no se ejecutan los eventos


que restan desde ese momento hasta que se recorren todos los elementos pendientes
hasta el elemento window.

15.5 Tipos de eventos


La lista completa de eventos que se pueden generar en un navegador se puede dividir
en cuatro grandes grupos. La especificacin de DOM define los siguientes grupos:

Eventos de ratn: se originan cuando el usuario emplea el ratn para realizar algunas
acciones.
Eventos de teclado: se originan cuando el usuario pulsa sobre cualquier tecla de su teclado.
Eventos HTML: se originan cuando se producen cambios en la ventana del navegador o
cuando se producen ciertas interacciones entre el cliente y el servidor.
Eventos DOM: se originan cuando se produce un cambio en la estructura DOM de la pgina.
Tambin se denominan "eventos de mutacin".

15.5.1 Eventos de ratn

Los eventos de ratn son, con mucha diferencia, los ms empleados en las
aplicaciones web. Los eventos que se incluyen en esta clasificacin son los siguientes:

Evento Descripcin

Se produce cuando se pulsa el botn izquierdo del ratn. Tambin


click se produce cuando el foco de la aplicacin est situado en un
botn y se pulsa la tecla ENTER
Evento Descripcin

dblclick Se produce cuando se pulsa dos veces el botn izquierdo del ratn

mousedown Se produce cuando se pulsa cualquier botn del ratn

Se produce cuando el puntero del ratn se encuentra en el


mouseout interior de un elemento y el usuario mueve el puntero a un lugar
fuera de ese elemento

Se produce cuando el puntero del ratn se encuentra fuera de


mouseover un elemento y el usuario mueve el puntero hacia un lugar en el
interior del elemento

Se produce cuando se suelta cualquier botn del ratn que haya


mouseup
sido pulsado

Se produce (de forma continua) cuando el puntero del ratn se


mousemove
encuentra sobre un elemento

Todos los elementos de las pginas soportan los eventos de la tabla anterior.

15.5.1.1 Propiedades

El objeto event contiene las siguientes propiedades para los eventos de ratn:

Las coordenadas del ratn (todas las coordenadas diferentes relativas a los distintos
elementos)
La propiedad type
La propiedad srcElement (Internet Explorer) o target (DOM)
Las propiedades shiftKey, ctrlKey, altKey y metaKey (slo DOM)
La propiedad button (slo en los eventos mousedown, mousemove, mouseout,
mouseover y mouseup)

Los eventos mouseover y mouseout tienen propiedades adicionales. Internet Explorer


define la propiedad fromElement, que hace referencia al elemento desde el que el
puntero del ratn se ha movido y toElement que es el elemento al que el puntero del
ratn se ha movido. De esta forma, en el evento mouseover, la propiedad toElement
es idntica a srcElement y en el evento mouseout, la propiedad fromElement es
idntica a srcElement.

En los navegadores que soportan el estndar DOM, solamente existe una propiedad
denominada relatedTarget. En el evento mouseout, relatedTarget apunta al
elemento al que se ha movido el ratn. En el evento mouseover, relatedTarget
apunta al elemento desde el que se ha movido el puntero del ratn.
Cuando se pulsa un botn del ratn, la secuencia de eventos que se produce es la
siguiente: mousedown, mouseup, click. Por tanto, la secuencia de eventos necesaria
para llegar al doble click llega a ser tan compleja como la siguiente: mousedown,
mouseup, click, mousedown, mouseup, click, dblclick.

15.5.2 Eventos de teclado

Los eventos que se incluyen en esta clasificacin son los siguientes:

Evento Descripcin

Se produce cuando se pulsa cualquier tecla del teclado. Tambin


keydown
se produce de forma continua si se mantiene pulsada la tecla

Se produce cuando se pulsa una tecla correspondiente a un


carcter alfanumrico (no se tienen en cuenta telas como SHIFT,
keypress
ALT, etc.). Tambin se produce de forma continua si se mantiene
pulsada la tecla

keyup Se produce cuando se suelta cualquier tecla pulsada

15.5.2.1 Propiedades

El objeto event contiene las siguientes propiedades para los eventos de teclado:

La propiedad keyCode
La propiedad charCode (slo DOM)
La propiedad srcElement (Internet Explorer) o target (DOM)
Las propiedades shiftKey, ctrlKey, altKey y metaKey (slo DOM)

Cuando se pulsa una tecla correspondiente a un carcter alfanumrico, se produce la


siguiente secuencia de eventos: keydown, keypress, keyup. Cuando se pulsa otro tipo
de tecla, se produce la siguiente secuencia de eventos: keydown, keyup. Si se
mantiene pulsada la tecla, en el primer caso se repiten de forma continua los eventos
keydown y keypress y en el segundo caso, se repite el evento keydown de forma
continua.

15.5.3 Eventos HTML

Los eventos HTML definidos se recogen en la siguiente tabla:

Evento Descripcin

load Se produce en el objeto window cuando la pgina se carga por


completo. En el elemento <img> cuando se carga por completo la
Evento Descripcin

imagen. En el elemento

Se produce en el objeto window cuando la pgina desaparece por


unload completo (al cerrar la ventana del navegador por ejemplo). En el
elemento <object> cuando desaparece el objeto.

Se produce en un elemento <object> cuando el usuario detiene la


abort
descarga del elemento antes de que haya terminado

Se produce en el objeto window cuando se produce un error de


JavaScript. En el elemento <img> cuando la imagen no se ha podido
error
cargar por completo y en el elemento <object> cuando el elemento
no se carga correctamente

Se produce cuando se seleccionan varios caracteres de un cuadro


select
de texto (<input> y <textarea>)

Se produce cuando un cuadro de texto (<input> y <textarea>) pierde


change el foco y su contenido ha variado. Tambin se produce cuando vara
el valor de un elemento <select>

Se produce cuando se pulsa sobre un botn de tipo submit (<input


submit
type="submit">)

Se produce cuando se pulsa sobre un botn de tipo reset (<input


reset
type="reset">)

Se produce en el objeto window cuando se redimensiona la ventana


resize
del navegador

Se produce en cualquier elemento que tenga una barra de scroll,


scroll cuando el usuario la utiliza. El elemento <body> contiene la barra
de scroll de la pgina completa

Se produce en cualquier elemento (incluido el objeto window) cuando


focus
el elemento obtiene el foco

Se produce en cualquier elemento (incluido el objeto window) cuando


blur
el elemento pierde el foco

Uno de los eventos ms utilizados es el evento load, ya que todas las manipulaciones
que se realizan mediante DOM requieren que la pgina est cargada por completo y
por tanto, el rbol DOM se haya construido completamente.
El elemento <body> define las propiedades scrollLeft y scrollTop que se pueden
emplear junto con el evento scroll.

15.5.4 Eventos DOM

Aunque los eventos de este tipo son parte de la especificacin oficial de DOM, an no
han sido implementados en todos los navegadores. La siguiente tabla recoge los
eventos ms importantes de este tipo:

Evento Descripcin

Se produce cuando se aaden o eliminan nodos


DOMSubtreeModified
en el subrbol de un documento o elemento

Se produce cuando se aade un nodo como hijo


DOMNodeInserted
de otro nodo

Se produce cuando se elimina un nodo que es


DOMNodeRemoved
hijo de otro nodo

Se produce cuando se elimina un nodo del


DOMNodeRemovedFromDocument
documento

Se produce cuando se aade un nodo al


DOMNodeInsertedIntoDocument
documento

You might also like