Descargado 14 veces
Más contenido relacionado
Manejo de eventos
- 1. JAVASCRIPT Manejo de Eventos Prof.María Zeballos
- 2. Para dotar dedinamismo 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 eventosmás importantes, agrupados por el tipo de elemento para el que están definidos:
- 4. Eventos definidos paratodos 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 paratodos 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áginase 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 unatecla, sin soltarlaonkeydown • Pulsar una teclaonkeypress • Soltar una tecla pulsadaonkeyup Eventos definidos para elementos de formulario y body.
- 8. •Seleccionar un textoonselect Eventodefinido sólo para input y textarea
- 9. • Deseleccionar unelemento que se ha modificado.onchangue Evento definidos para input, select y textarea
- 10. Eventos definidos paralos elementos <button>, <input>, <label>, <select>, <textarea>, <body> •Deseleccionar el elementoonblur •Seleccionar un elementoonfocus
- 11. Las funciones asociadasa 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 eliminargran 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 formamá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 losManejadores 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 losManejadores 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 lafunció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 escreada 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