Los eventos
Los eventos son como señales que el navegador lanza cuando ocurre algún cambio en su entorno. Estos cambios pueden tener diferentes causas, por ejemplo mover el ratón, hacer scroll, finalizar la carga de una imagen, terminar la carga de la página, etc
En este ejemplo usamos un evento causado por un click del ratón en el cuadro:
function media(lista) {
var res = lista.reduce(function(tot, v, i, l){ return tot+= v/l.length}, 0);
return res
};
function calcular(){
var datos = [10, 20, 30, 40, 50];
alert( media(datos));
}
var blq = document.getElementById("evnt");
blq.addEventListener("click",calcular, true)
Pulsa con el ratón en cualquier parte del cuadro de este último ejemplo y observa como se muestra el valor calculado de la media en una ventana emergente.
El script se ha ejecutado gracias a la acción click. Al pulsar el ratón se dispara un evento que invoca a la función calcular, por que esta es la función que se le ha asociado (línea 10).
El script asociado al evento (handler) tiene un argumento que es el objeto evento al que se asocia. Dentro del script puedes usar este argumento o también, puesdes usar el objeto global event. Son el mismo objeto.
A un evento también se le puede asignar un objeto que posea el método handleEvent, que será quien procesa el evento.
Cada elemento en la página o en el navegador puede tener sus propios eventos. En general tienen añgún manejador por defecto, por ejemplo, al hacer click en un enlace con el ratón el navegador carga la página señalada por el enlace. Al asignarle una función este compartamiento es interceptado por Javascript y se ejecuta la función asociada.
Los evetnos se asginan a los elementos del documento o la ventana del navegador mediante asignación directa al objeto o utilizando el método addEventListener
objeto.onclick = calcular;
objeto.onmouseover = function(){calcular()}
objeto.addEventListener("click", calcular)
objeto.addEventListener("click", function(){calcular()})
Observa que si se usa la asignación directa (líneas 1 y 2) el nombre del evento comienza siempre con el prefijo on seguido del nombre de la acción. Mientras que con el método addEventListener se usa el nombre de la acción como primer argumento y el segundo argumento es función de llamada o un objeto que contenga el método handleEvent.
En el ejemplo que sigue el ratón al pasar por encima del cuadro de código se producen dos acciones mouseover al entrar y mouseout al salir del cuadro.
<script>
function cambFondo(evento){
col = (evento.type=="mouseover") ?"lightblue":"white"; evento.currentTarget.style.backgroundColor = col
}
var o = document.getElementById("cuadro");
o.addEventListener("mouseover", cambFondo);
o.addEventListner("mouseout", cambFondo);
</script>
<div id="cuadro">
Es este cuadro de ejemplo
</div>
En HTML la forma de asignar un evento es usando el nombre de evento: el prefijo on seguido del nombre de la acción
Este ejemplo es similar al anterior pero con HTML5
<script>
function color(col){
event.currentTarget.style.backgroundColor=col;
}
</script>
<div onmouseover="color('lightblue)" onmouseout="color('white')">
Es este cuadro de ejemplo
</div>
En esta versión se aplican los eventos directamente con HTML, fíjate en el prefijo on que también es necesario en HTML
Resumen
Los eventos son señales que lanza el navegador cuando ocurre algún cambio en su entorno .
Cada elemento de la ventana del navegador y los elementos del documento web puede responder a eventos.
Un mismo tipo de evento puede poducirse en diferentes elementos del entorno web.
Desde el punto de vista de los objetos, el evento es una propiedad a la que se le asigna una función u otro objeto manejador de eventos.
Los objetos controladores de eventos se pueden asignar con
- Javascript:
- objeto.onnombre_evento = controlador
- objeto.addEventListener(nombre, controlador)
- HTML5:
- <.elemento onnombre_accion= "controlador(args)">...</>
Los controladores son :
- funciones con nombre
- funciones anónimas
- objeto con un método handleEvent
La función o método controlador del evento tiene acceso al event a través del cual pueden conocer todo el contexto en que se ha originado el evento.
También es posible eliminar un controlador de evento de un objeto, dependiendo de como se asignara el evento:
Si se uso el método addEventListener se usa el método removeEventListener(nombre_accion, nombre_controlador)
Si se usó la asignación directa o HTML5 se asigna null al objeto.onnombre_accion para eliminar la asignación.
A fin de mantener un documento HTML lo más limpio posible, es aconsejable usar Javascript para este tipo de tareas, separando la información del procesamiento.