Eventos. Ejemplos de Eventos Un click del mouse Carga de una imagen o página web Pasar el mouse por encima de un punto del documento Seleccionar un campo.

Presentación del tema: "Eventos. Ejemplos de Eventos Un click del mouse Carga de una imagen o página web Pasar el mouse por encima de un punto del documento Seleccionar un campo."— Transcripción de la presentación:

1 Eventos

2 Ejemplos de Eventos Un click del mouse Carga de una imagen o página web Pasar el mouse por encima de un punto del documento Seleccionar un campo de un formulario Enviar un formulario XHTML Presionar una tecla

3 Modelos de Eventos Modelo Básico de Eventos Modelo de Eventos Estándar Modelo de Eventos de Internet Explorer

4 Modelo Básico de Eventos Cada elemento o etiqueta XHTML define su propia lista de posibles eventos

5 Modelo Básico de Eventos Cada elemento o etiqueta XHTML define su propia lista de posibles eventos Un mismo tipo de evento puede estar definido para varios elementos XHTML diferentes

6 Modelo Básico de Eventos Cada elemento o etiqueta XHTML define su propia lista de posibles eventos Un mismo tipo de evento puede estar definido para varios elementos XHTML diferentes Un mismo elemento XHTML puede tener asociados varios eventos diferentes

7 Modelo Básico de Eventos EventoDescripciónElementos para los que esta definido onblur Deseleccionar un elemento,,,,, onchange Deseleccionar un elemento que se ha modificado,, onclick Presionar y soltar el ratónTodos los elementos ondblclick Presionar dos veces seguidas con el ratónTodos los elementos onfocus Seleccionar un elemento,,,,, onkeydown Pulsar una tecla (sin soltar)Elementos de formulario y onkeypress Pulsar una teclaElementos de formulario y onkeyup Soltar una tecla pulsadaElementos de formulario y onload La página se ha cargado completamente

8 Modelo Básico de Eventos Evento DescripciónElementos para los que esta definido onmousedown Pulsar (sin soltar) un boton del ratónTodos los elementos onmousemove Mover el ratónTodos los elementos onmouseout El ratón sale de elemento (pasa por encima de otro elemento) Todos los elementos onmouseover El ratón entra en el elemento (pasa por encima del elemento) Todos los elementos onmouseup Soltar el botón que estaba pulsando en el ratónTodos los elementos onreset Inicializar el formulario onresize Se ha modificado el tamaño de la ventana del navegador onselect Seleccionar un texto, onsubmit Enviar el formulario onunload Se abandona la página

9 Manejadores de Eventos Como atributos de los elementos XHTML Como funciones Javascript externas Manejadores semánticos

10 Manejadores de Eventos como atributos XHTML Es el más sencillo y el menos profesional El código se incluye en un atributo del propio elemento

11 Manejadores de Eventos y la variable this Javascript define una variable especial llamada this que se crea automáticamente Se utiliza la variable this para referirse al elemento XTHML que provoca el evento

12 Manejadores de Eventos y la variable this Si no se utiliza la variable this Sección de contenidos...

13 Manejadores de Eventos y la variable this Si no se utiliza la variable this Sección de contenidos... Si se utiliza la variable this Sección de contenidos...

14 Manejadores de Eventos como Funciones Externas function mensaje() { alert('Que show'); } La variable this no puede ser utilizada por lo que hay que pasarla como parametro

15 Manejadores de Eventos Semánticos // Función externa function mensaje() { alert('que show'); } // Asignar la función externa al elemento window.onload = function() { document.getElementById("pinchable").onclick = mensaje; } // Elemento XHTML

16 Objeto event Javascript permite obtener información sobre el ratón y el teclado mediante el objeto event.

17 Objeto event Javascript permite obtener información sobre el ratón y el teclado mediante el objeto event. Internet Explorer considera este objeto como parte del objeto window

18 Objeto event Javascript permite obtener información sobre el ratón y el teclado mediante el objeto event. Internet Explorer considera este objeto como parte del objeto window El resto de los navegadores lo consideran como el único argumento que tienen las funciones manejadoras de eventos

19 Objeto event Todos los navegadores modernos, excepto IE, crean mágicamente y de manera automática un argumento que se pasa a la funcion manejadora.

20 Objeto event En IE: var evento = window.event

21 Objeto event En IE: var evento = window.event En el resto: function manejadorEventos(elEvento) { var evento = elEvento; }

22 Objeto event En todos los navegadores: function manejadorEventos(elEvento) { var evento = elEvento || window.event; }

23 Objeto event – Información sobre el Evento La propiedad type indica el tipo de evento producido var tipo = evento.type; El tipo de evento es igual al evento producido sin el prefijo on

24 Objeto event – Información de Teclado Evento keydown  Mismo comportamiento en todos: keycode : código interno de la tecla charcode : no definido

25 Objeto event – Información de Teclado Evento keypress  Internet Explorer keycode : código del caracter de la tecla pulsada charcode : no definido  Resto de Navegadores keycode : para las teclas normales, no definido. Para las teclas especiales, el código interno de la tecla charcode : para las teclas normales, el código del caracter de la tecla pulsada, para las teclas especiales, 0

26 Objeto event – Información de Teclado Evento keyup :  Mismo comportamiento keycode : código interno de la tecla charcode : no definido

27 Objeto event – Información de Teclado Las propiedades altKey, ctrlKey y shiftKey indican si alguna de esas teclas es pulsada durante el evento

28 Objeto event – Información de Teclado function manejador(elEvento) { var evento = elEvento || window.event; var caracter = evento.charCode || evento.keyCode; alert("Carácter: " + String.fromCharCode(caracter)); } document.onkeypress = manejador;

29 Objeto event – Información del Ratón La información más relevante es saber la posición del raton

30 Objeto event – Información del Ratón La información más relevante es saber la posición del raton Posición respecto a la pantalla del ordenador

31 Objeto event – Información del Ratón La información más relevante es saber la posición del raton Posición respecto a la pantalla del ordenador Posición respecto a la ventana del navegador

32 Objeto event – Información del Ratón La información más relevante es saber la posición del raton Posición respecto a la pantalla del ordenador Posición respecto a la ventana del navegador Posición respecto a la propia página XHTML

33 Objeto event – Información del Ratón Respecto al Navegador:  clientX  clientY Respecto a la Pantalla  screenX  screenY

34 Objeto event – Información del Ratón Respecto al XHTML (no IE):  pageX  pageY

35 Objeto event – Información del Ratón // Detectar si el navegador es Internet Explorer var ie = navigator.userAgent.toLowerCase().indexOf('msie')!=-1; if(ie) { coordenadaX = evento.clientX + document.body.scrollLeft; coordenadaY = evento.clientY + document.body.scrollTop; } else { coordenadaX = evento.pageX; coordenadaY = evento.pageY; } alert("Has pulsado el ratón en la posición: " + coordenadaX + ", " + coordenadaY + " respecto de la página web");