eventos. ejemplos de eventos un click del mouse carga de una imagen o página web pasar el mouse por...

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


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 tipo de evento puede estar definido para varios elementos XHTML diferentes

Un mismo elemento XHTML puede tener asociados varios eventos diferentes


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>


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


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 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';">


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';">


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


Internet Explorer considera este objeto como parte del objeto window

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


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


Evento keyup: Mismo comportamiento

keycode: código interno de la tecla charcode: no definido


Las propiedades altKey, ctrlKey y shiftKey indican si alguna de esas teclas es pulsada durante el evento


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



Posición respecto a la pantalla del ordenador




Posición respecto a la ventana del navegador




Posición respecto a la ventana del navegador

Posición respecto a la propia página XHTML


Respecto al Navegador: clientX clientY

Respecto a la Pantalla screenX screenY


Respecto al XHTML (no IE): pageX pageY


// 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");

eventos. ejemplos de eventos un click del mouse carga de una imagen o página web pasar el mouse por...

Documents