Manejo de eventos

878 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
878
On SlideShare
0
From Embeds
0
Number of Embeds
542
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Manejo de eventos

  1. 1. JAVASCRIPT Manejo de Eventos Prof. María Zeballos
  2. 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. 3. Revisaremos los eventos más importantes, agrupados por el tipo de elemento para el que están definidos:
  4. 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. 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. 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. 7. • Pulsar una tecla, sin soltarlaonkeydown • Pulsar una teclaonkeypress • Soltar una tecla pulsadaonkeyup Eventos definidos para elementos de formulario y body.
  8. 8. •Seleccionar un textoonselect Evento definido sólo para input y textarea
  9. 9. • Deseleccionar un elemento que se ha modificado.onchangue Evento definidos para input, select y textarea
  10. 10. Eventos definidos para los elementos <button>, <input>, <label>, <select>, <textarea>, <body> •Deseleccionar el elementoonblur •Seleccionar un elementoonfocus
  11. 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. 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. 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. 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. 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. 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. 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

×