Clase 9 eventos

Electiva II
Clase 9
Eventos JavaScript
Ing. José Ricardo Tillero UPTAEB

Eventos JavaScript
Eventos
 Los eventos definen lo que hace el usuario en la página, o en el elemento de la página al que se le aplica.
Cualquier acción que haga el usuario es un evento: mover el ratón, hacer click o doble click, pulsar una tecla,
entrar con el ratón en un elemento, seleccionarlo con el ratón o con la tecla TAB, etc. Incluso el hecho de
acabar de cargarse la página es un evento.
 En JavaScript se puede detectar cuando se produce un determinado evento, y aplicarle un código para que al
producirse el evento se ejecute ese código. De esta forma se interactúa con el usuario, el cual al provocar el
evento desencadena la ejecución del código JavaScript asociado.
 Desde JavaScript podemos escuchar estos eventos y engancharle una función (event handler) que se ejecutará
cuando ocurra este evento.
 Cuando hacemos click en un link (a), también hacemos click en su contenedor (li,ul), en el body y en ultima
instancia en el document. Esto es lo que se llama la propagación del evento.

Eventos JavaScript
Eventos
 La especificación de eventos DOM Level 2 define que el evento se propaga en 3 fases: Capturing, Target y
Bubbling:
 Capturing: El click ocurre en el document y va pasando por todos los elementos hasta llegar al link (a)
 Bubbling: El click ocurre en el link (a) y va emergiendo hasta el document.
Firefox, Opera y Safari implementan las 3 fases pero IE sólo el Bubbling.

Eventos JavaScript
Tipos de eventos
 Podemos clasificar los eventos en varios tipos, dependiendo de la manera de interactuar con ellos del usuario.
estos son:
 Eventos del ratón: Aquellos en los que el usuario utiliza el ratón para provocarlos.
 Eventos de teclado: Aquellos en los que el usuario utiliza el teclado para provocarlos.
 Eventos de página: Aquellos en los que cambia el estado de la página (se carga, se descarga, se redimensiona,
etc).
 Eventos de formulario: Aquellos en los que se cambia el estado de algún elemento de un formulario.
 JavaScript desde enlaces:
 También podemos utilizar los enlaces para llamar al código JavaScript. En este caso el enlace se comporta
de la misma manera que si pusiéramos el evento onclick, es decir, al pulsar sobre el enlace se activa el
código JavaScript.
 Para ello debemos escribir el enlace de la siguiente manera:
<a href="javascript: funcionJavascript()">Texto del enlace</a>
 En el atributo href escribimos como valor la palabra javascript seguida de dos puntos. Después llamamos
a la función JavaScript que contiene el código.

Eventos JavaScript
Eventos del ratón
 onclick: Evento lanzado cuando se realiza un click con el mouse.
 ondblclick: Evento lanzado cuando se realiza un doble click con el mouse.
 onmousedown: Evento lanzado cuando el botón del mouse es presionado.
 onmousemove: Evento lanzado cuando el puntero del mouse se mueve.
 onmouseout: Evento lanzado cuando el puntero del mouse sale del área del elemento.
 onmouseover: Evento lanzado cuando el puntero del mouse pasa por encima del elemento.
 Onmouseup: Evento lanzado cuando el botón del mouse es soltado.

Eventos JavaScript
Eventos del teclado
 Onkeydown: Evento lanzado cuando una tecla es presionada.
 Onkeypress: Evento lanzado cuando una tecla es presionada y soltada.
 onkeyup: Evento lanzado cuando una tecla es soltada.

Eventos JavaScript
Eventos de la página - <body> y <fameset>
 onunload: Evento lanzado cuando la página es cambiada.
 onload: Evento lanzado cuando la pagina es cargada.

Eventos JavaScript
Eventos del formulario - <form>
 onblur: Evento lanzado cuando se pierde el foco.
 onchang: Evento lanzado cuando cambia algún elemento.
 onfocus: Evento lanzado cuando algún elemento obtiene el foco.
 onrest: Evento lanzado cuando el form es reseteado.
 onselect: Evento lanzado cuando un elemento es seleccionado.
 onsubmit: Evento lanzado cuando un form le hicieron el submit.

Eventos JavaScript
Eventos mas importantes compatibles con todos los navegadores

Eventos JavaScript
Manejo de eventos desde la página
 Código JavaScript en la página: En la misma etiqueta HTML que produce el evento insertamos el nombre del evento como
un atributo de la misma. El valor del atributo será el código JavaScript que queramos insertar. Ejemplo:
<p ondblclick="alert('esto es un evento')">Haz doble clic para que se produzca el evento</p>
Este método sirve sólo para código JavaScript muy corto, una o dos sentencias a lo sumo, ya que si no se alargan
excesivamente las etiquetas de HTML, y se mezclan los códigos de JavaScript y de HTML, cosa nada recomendable si
queremos hacer después una revisión de la página, o cambiar algo de alguno de los códigos.
 Llamada a una función desde código HTML: Sin embargo si queremos poner un código algo más largo, podemos escribir
en el código HTML el atributo del evento, y como valor hacemos una llamada a una función. Esta función será la que
contenga el código JavaScript que queramos que se ejecute con el evento. Veamos un ejemplo, en el código HTML
pondremos:
<p onclick="abrir()">Abrir dos ventanas emergentes</p>
y entre etiquetas <script> </script>, insertaremos la siguiente función:
function abrir() {
var ventanas =["http://www.google.com","http://www.yahoo.es"];
open(ventanas[0],"google","top=50,left=50,scrollbars=yes")
open(ventanas[1],"yahoo","top=100,left=100,scrollbars=yes")
}
Evidentemente este código sería demasiado largo para colocarlo como atributo de un elemento HTML, por lo que lo
ponemos dentro de una función, y desde el atributo onclick hacemos la llamada a la función.

Eventos JavaScript
 Llamada a una función desde el mismo código JavaScript: Consiste en escribir primero una función que se
quiere ejecutar con el evento, y llamarla después desde el propio código JavaScript. Al llamarla haremos
referencia al elemento, en el cual se incluye el evento como una propiedad de éste.
Por ejemplo, queremos que al pasar el ratón por encima de un texto, éste cambie su letra a itálica. aplicaremos
para ello los eventos onmouseover para ponerlo en itálica al pasar por él el ratón, y onmouseout para que
vuelva a su estado normal cuando apartemos el ratón.
<html>
<head>
<title>Manejo de eventos desde código JavaScript</title>
</head>
<body>
<p id="texto">Pasa el ratón por este texto y cambiará a itálica.</p>
<script type="text/javascript">
function italica() {
document.getElementById("texto").style.fontStyle = "italic";
}
function normal() {
document.getElementById("texto").style.fontStyle = "normal";
}
document.getElementById("texto").onmouseover = italica;
document.getElementById("texto").onmouseout = normal;
</script>
</body>
</html>

Eventos JavaScript
Como ven el código JavaScript es el mismo que cuando llamamos a la función desde el código HTML (atributo
que empieza por "on"), pero aquí no vamos a llamar a la función desde su atributo, sino que incluiremos esa
llamada en el código JavaScript.
Accedemos primero al párrafo donde debe ir el evento document.getElementById("texto) y después
añadimos el evento como una propiedad del mismo .onmouseover ; luego le asignamos como valor el nombre
de la función =italic. Observa que al asignarle el nombre de la función debemos escribirla sin paréntesis, ya
que si la escribiéramos con paréntesis le estaríamos pasando el valor del return de la función como valor del
evento, y no la ejecución de la función.
La etiqueta HTML que llama al evento no tiene ahora ningún atributo de evento, sólo necesitamos ponerle el
atributo id para identificarlo y poder llamarlo.
Para que el script funcione debemos ponerlo después del elemento que produce el evento, es decir en el body
en cualquier sitio después del elemento al que le aplicamos la propiedad del evento.
Esto es debido a que la página se va cargando de manera secuencial, en el mismo orden en que está escrita. Si
lo ponemos antes, cuando JavaScript llama al elemento, éste no está todavía cargado, por lo que no lo
encuentra, y da el error de que no existe.

Eventos JavaScript
 función anónima onload: Para poder corregir el error anterior, y poder poner el script delante de
la página, debemos forzar mediante una función, a que el código JavaScript no se cargue hasta
que el resto de la página esté cargado. La función en concreto es la siguiente:
window.onload = function() {
... código javascript que debe ser cargado después de la página ...
}
Esta función también nos sirve para poner el código en el que buscamos un elemento de la
página (por ejemplo mediante document.getElementById("...")) antes del mismo (por
ejemplo en la etiqueta <head>), ya que el código no se ejecutará hasta que la página esté
cargada.
Se dice que es una función anónima porque la función en realidad no tiene nombre, sin embargo
sí que requiere unas condiciones para que se ejecute, y estas son las que se indican delante del
signo igual: (window.onload). Si no estamos muy seguros de cual es el elemento que requiere
que la página esté cargada para que se ejecute el código, podemos englobar todo el código
JavaScript dentro de esta función.

Eventos JavaScript
En concreto en el ejemplo anterior el código quedará:
<html>
<head>
<title>Manejo de eventos desde código JavaScript</title>
function italica() {
document.getElementById("texto").style.fontStyle = "italic";
}
function normal() {
document.getElementById("texto").style.fontStyle = "normal";
}
document.getElementById("texto").onmouseover = italica;
document.getElementById("texto").onmouseout = normal;
}
</script>
</head>
<body>
<p id="texto">Pasa el ratón por este texto y cambiará a itálica.</p>
</body>
</html>

Eventos JavaScript
El código anterior lo podríamos poner dentro de un script de la siguiente manera:
function verde() {
this.style.color = "green";
}
function rojo() {
this.style.color = "red";
}
document.getElementById("cambiar").onclick = verde;
document.getElementById("cambiar").ondblclick = rojo;
}
Como puede verse, dentro de las funciones, hemos sustituido el acceso al elemento por la variable this, con lo cual el
código queda bastante más corto.

Eventos JavaScript
 Ejemplo:
<html>
<head><title>Gestión de eventos</title>
function paginaCargada(){
alert("La pagina ha sido cargada");
}
window.onload=paginaCargada;
</script>
</head>
<body>
<form>
<input type="button" value="Hola" onClick="window.alert('Hola')"
/>
</form>
</body>
</html>

Eventos JavaScript
 Ejemplo:
<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1‐strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http‐equiv="Content‐Type" content="text/html; charset=utf‐8" />
<title>Gestión de eventos</title>
document.getElementById("primero").onclick=function(){cambiaTexto(this)};
}
function cambiaTexto(id) { id.innerHTML="¡Ole!"; }
</script>
</head>
<body>
<h1 id="primero">Haz click en este texto</h1>
</body>
</html>

Eventos JavaScript
Información del evento
 A veces necesitamos obtener información adicional sobre algunos aspectos del evento. Los casos más normales
son obtener la posición del ratón en los eventos de ratón, o la tecla con la que se actúa en los eventos de teclado.
Para ello JavaScript tiene un objeto especial llamado event. Sin embargo los diferentes navegadores tienen
distintas formas de obtener este objeto. Internet explorer considera que forma parte del objeto window, con lo cual
se obtiene mediante el código window.event. El resto de navegadores lo consideran como un argumento implícito
que se pasa a la función al ser llamada por un evento, con lo que no tenemos más que darle un nombre al
argumento para obtener este objeto:
function manejaEventos(elEvento) { ...
En este caso al llamar a la función desde un evento, el objeto que nos da la información se llamaría elEvento. Para
obtener un código compatible con ambos tipos de navegadores, deberemos escribir el código de la siguiente manera:
function manejaEventos(elEvento) {
var evento = elEvento || window.event;
Donde evento es el objeto que nos dará la información sobre el evento, tanto en Internet Explorer como en el resto
de navegadores. Podemos cambiar el nombre del argumento, en lugar de llamarlo elEvento podemos llamarlo de
cualquier otra manera, al igual que el nombre del objeto, aquí lo llamamos evento, pero lo que no podemos variar es
el window.event, ya que esta es la forma de obtener el objeto en Internet Explorer.

Eventos JavaScript
Información sobre el tipo de evento
 Una vez que accedemos al objeto event el siguiente paso es obtener la información a partir de este objeto. Si ponemos varios eventos
asociados a un mismo elemento, mediante el objeto event podemos distinguirlos para asociarles diferentes códigos. La propiedad type
permite distinguir el tipo de evento producido, lo cual permite distinguir entre los distintos eventos que puede manejar una función.
function manejaEventos(elEvento) {
var evento = elEvento || window.event;
var tipo = evento.type
...
}
 Aquí la variable tipo será el nombre del evento sin el prefijo on, es decir si el evento que hemos pasado a la función es onmouseover el valor
de tipo será "mouseover“. Vamos a verlo en el siguiente código el cual cambia a colores distintos a un párrafo, según hagamos sobre él un
click o un doble click. El código HTML del párrafo es el siguiente:
<p id="colores">pulsa un click para cambiar a color purpura, doble click color oliva</p>
 Y el código JavaScript del ejemplo es el siguiente:
function color(elEvento){
evento = elEvento || window.event;
tipo = evento.type;
if (tipo == "click") {
this.style.color = "purple";
}
else if (tipo == "dblclick") {
this.style.color = "olive";
}
}
document.getElementById("colores").onclick = color;
document.getElementById("colores").ondblclick = color;
}

Clase 9 eventos

Más contenido relacionado

La actualidad más candente (12)

Similar a Clase 9 eventos (20)

Más de José Ricardo Tillero Giménez (20)

Último (20)

Clase 9 eventos