Post on 11-Apr-2015
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 de un formulario Enviar un formulario XHTML Presionar una tecla
Modelos de Eventos
Modelo Básico de Eventos
Modelo de Eventos Estándar
Modelo de Eventos de Internet Explorer
Modelo Básico de Eventos
Cada elemento o etiqueta XHTML define su propia lista de posibles eventos
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
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
Modelo Básico de Eventos
Evento Descripción Elementos para los que esta definido
onblur Deseleccionar un elemento <buton>, <input>, <label>, <select>, <textarea>, <body>
onchange Deseleccionar un elemento que se ha modificado
<input>, <select>, <textarea>
onclick Presionar y soltar el ratón Todos los elementos
ondblclick Presionar dos veces seguidas con el ratón Todos los elementos
onfocus Seleccionar un elemento <buton>, <input>, <label>, <select>, <textarea>, <body>
onkeydown Pulsar una tecla (sin soltar) Elementos de formulario y <body>
onkeypress Pulsar una tecla Elementos de formulario y <body>
onkeyup Soltar una tecla pulsada Elementos de formulario y <body>
onload La página se ha cargado completamente <body>
Modelo Básico de Eventos
Evento Descripción Elementos para los que esta definido
onmousedown Pulsar (sin soltar) un boton del ratón Todos los elementos
onmousemove Mover el ratón Todos 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ón Todos los elementos
onreset Inicializar el formulario <form>
onresize Se ha modificado el tamaño de la ventana del navegador
<body>
onselect Seleccionar un texto <input>, <textarea>
onsubmit Enviar el formulario <form>
onunload Se abandona la página <body>
Manejadores de Eventos
Como atributos de los elementos XHTML
Como funciones Javascript externas
Manejadores semánticos
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
<input type="button" value="Pulsame" onclick="alert('Que show!');" />
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
Manejadores de Eventos y la variable this
Si no se utiliza la variable this<div id="contenidos" style="width:150px; height:60px; border:thin
solid silver" onmouseover="document.getElementById('contenidos').style.borderColor='black';" onmouseout="document.getElementById('contenidos').style.borderColor='silver';">
Sección de contenidos...</div>
Manejadores de Eventos y la variable this
Si no se utiliza la variable this<div id="contenidos" style="width:150px; height:60px; border:thin
solid silver" onmouseover="document.getElementById('contenidos').style.borderColor='black';" onmouseout="document.getElementById('contenidos').style.borderColor='silver';">
Sección de contenidos...</div>
Si se utiliza la variable this<div id="contenidos" style="width:150px; height:60px; border:thin
solid silver" onmouseover="this.style.borderColor='black';" onmouseout="this.style.borderColor='silver';">
Sección de contenidos...</div>
Manejadores de Eventos como Funciones Externas
function mensaje() { alert('Que show');} <input type="button" value="Pulsame" onclick="mensaje()" />
La variable this no puede ser utilizada por lo que hay que pasarla como parametro
Manejadores de Eventos Semánticos
// Función externafunction mensaje() { alert('que show');} // Asignar la función externa al elementowindow.onload = function() {document.getElementById("pinchable").onclick = mensaje;} // Elemento XHTML<input id="pinchable" type="button" value="Pulsame" />
Objeto event
Javascript permite obtener información sobre el ratón y el teclado mediante el objeto event.
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
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
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.
Objeto event
En IE:
var evento = window.event
Objeto event
En IE:
var evento = window.event
En el resto:
function manejadorEventos(elEvento) {
var evento = elEvento;
}
Objeto event
En todos los navegadores:
function manejadorEventos(elEvento) {
var evento = elEvento || window.event;
}
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
Objeto event – Información de Teclado
Evento keydown Mismo comportamiento en todos:
keycode: código interno de la tecla charcode: no definido
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
Objeto event – Información de Teclado
Evento keyup: Mismo comportamiento
keycode: código interno de la tecla charcode: no definido
Objeto event – Información de Teclado
Las propiedades altKey, ctrlKey y shiftKey indican si alguna de esas teclas es pulsada durante el evento
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;
Objeto event – Información del Ratón
La información más relevante es saber la posición del raton
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
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
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
Objeto event – Información del Ratón
Respecto al Navegador: clientX clientY
Respecto a la Pantalla screenX screenY
Objeto event – Información del Ratón
Respecto al XHTML (no IE): pageX pageY
Objeto event – Información del Ratón
// Detectar si el navegador es Internet Explorervar 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");