Embed Size (px)
DESCRIPTION
Citation preview
JAVASCRIPTManejo de Eventos
Prof. María Zeballos
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.
Manejo de Eventos
Eventos definidos por JavaScript
Revisaremos los eventos más importantes, agrupados por el tipo de elemento para el que están definidos:
Eventos definidos por JavaScript
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
Eventos definidos por JavaScript
Eventos definidos para todos los elementos
• El ratón “sale” del elementoonmouseout
• El ratón pasa por encima del elementoonmouseover
• Soltar el botón que estaba pulsado en el ratónonmouseup
Eventos definidos por JavaScript
• 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
Eventos definidos por JavaScript
• Pulsar una tecla, sin soltarlaonkeydown
• Pulsar una teclaonkeypress
• Soltar una tecla pulsadaonkeyup
Eventos definidos para elementos de formulario y body.
Eventos definidos por JavaScript
•Seleccionar un textoonselect
Evento definido sólo para input y textarea
Eventos definidos por JavaScript
• Deseleccionar un elemento que se ha modificado.onchangue
Evento definidos para input, select y textarea
Eventos definidos por JavaScript
Eventos definidos para los elementos <button>, <input>, <label>, <select>,
<textarea>, <body>
• Deseleccionar el elementoonblur
• Seleccionar un elementoonfocus
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”
Manejo de Eventos
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(); “
Manejo de Eventos
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.
Manejo de Eventos
Para asignar los Manejadores Semánticos :
Manejo de Eventos
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.
Para asignar los Manejadores Semánticos :
Manejo de Eventos
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;}
Manejo de Eventos
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.
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.
Manejo de Eventos
Variable this
Fin…
