El documento explica cómo manejar eventos en JavaScript para dotar de dinamismo a las páginas web. Describe los diferentes eventos que se pueden manejar y tres formas de definir manejadores de eventos, recomendando la técnica de manejadores semánticos que mantiene separado el contenido de la página de su comportamiento mediante funciones externas y propiedades DOM.
2. Para dotar de dinamismo a las
páginas debemos programarlas para
que respondan a las acciones del
usuario, como por ejemplo el hacer
clic sobre algún elemento de la
página, o simplemente colocarse
sobre el elemento, presionar una
tecla, etc.
Con JavaScript podemos manejar
cada uno de los
eventos, asignándoles funciones que
se ejecutan al producirse el evento.
3. Revisaremos los eventos más
importantes, agrupados por el tipo
de elemento para el que están
definidos:
4. Eventos definidos para todos los elementos
• Pinchar y soltar el ratónonclick
• Pinchar dos veces seguidas con el
ratónondblclick
• Pulsar, sin soltar, un botón del ratónonmousedown
• Mover el ratónonmousemove
5. Eventos definidos para todos los elementos
• El ratón “sale” del elementoonmouseout
• El ratón pasa por encima del
elemento
onmouseover
• Soltar el botón que estaba
pulsado en el ratón
onmouseup
6. • La página se ha cargado
completamenteonload
• Se ha modificado el tamaño
de la ventana del navegadoronresize
• Se abandona la páginaonunload
Eventos definidos exclusivamente para body
7. • Pulsar una tecla, sin soltarlaonkeydown
• Pulsar una teclaonkeypress
• Soltar una tecla pulsadaonkeyup
Eventos definidos para elementos de
formulario y body.
9. • Deseleccionar un elemento que se
ha modificado.onchangue
Evento definidos para input, select y textarea
10. Eventos definidos para los elementos
<button>, <input>, <label>, <select>,
<textarea>, <body>
•Deseleccionar el elementoonblur
•Seleccionar un elementoonfocus
11. Las funciones asociadas a un evento se conocen
como manejadores de eventos.
Existe más de una forma de definir los
manejadores de eventos:
A. Podemos tenerlos como atributos de los
elementos XHTML, pero estaríamos
mezclando el contenido de la página con su
comportamiento, algo que no es muy
profesional.
onclick=“código JavaScript, que puede ser muy extenso”
12. B. Podemos eliminar gran parte de código
JavaScript de la página definiendo los
manejadores de eventos como funciones
externas, pero igual se tiene que pasar la
invocación a la función como atributos de los
elementos XHTML.
Onclick=“nombre_función_manjedora_evento(); “
13. C. La forma más profesional de definir los
manejadores de eventos es utilizar las
propiedades DOM de los elementos XHTML
para asignar las funciones externas que
responden al evento.
Esta técnica permite mantener limpio el código
XHTML, manteniendo separado el contenido de
la página de la programación que controla su
comportamiento.
Se conoce como Manejadores de Eventos
Semánticos y es la que se utiliza en esta
asignatura.
14. Para asignar los Manejadores Semánticos :
El elemento XHTML debe
tener su atributo id
Se crea la función externa
que manejará el evento
Se asocia la función al elemento:
•Se obtiene el elemento XHTML al que se desea
asignar la función manejadora, mediante las
funciones DOM.
•Como propiedad del elemento se utiliza el
evento que se quiere manejar.
•Se le asigna la función escribiendo su nombre sin
los paréntesis.
15. Para asignar los Manejadores Semánticos :
El elemento XHTML
debe tener su atributo id
Se crear la función externa
que manejará el evento
Se asocia la función al elemento:
•Se obtiene el elemento XHTML al que se desea asignar la función
manejadora, mediante las funciones DOM.
•Como propiedad del elemento se utiliza el evento que se quiere
manejar.
•Se le asigna la función escribiendo su nombre sin los paréntesis.
<nombre_etiqueta id=“ayuda“ …
function Maneja_even()
{código de la función}
window.onload = function() {
document.getElementById(“ayuda").onclick = Maneja_even;}
16. Se asocia la función al
elemento:
•Se obtiene el elemento
XHTML al que se desea
asignar la función
manejadora, mediante las
funciones DOM.
•Como propiedad del
elemento se utiliza el evento
que se quiere manejar.
•Se le asigna la función
escribiendo su nombre sin
los paréntesis.
window.onload = function()
{
document.getElementById(“ayuda").onclick
= Maneja_even;
}
Cabe resaltar que se ha utilizado una
función anónima asignada al evento onload
para asegurar que la asignación semántica
se haga después que la página se ha cargado
por completo. Esto es necesario porque se
están utilizando las propiedades que ofrece
DOM y estas sólo están disponibles cuando
la página se carga por completo.
17. Esta variable es creada automáticamente y sirve
en la programación de eventos para referirse al
elemento que provocó el evento.
this.id hace referencia al id del elemento que
provoca el evento.
Variable this
