Los eventos se producen cuando sucede algo determinado (como por ejemplo que el usuario pulse una tecla o mueva el ratón), pudiendo ser detectados por JavaScript para ejecutar un determinado código.
Disponemos de los siguientes eventos que podemos usar en los Objetos del DOM así como también en el Objeto Window():
- onblur(): se pierde el foco.
- onchange(): al modificar el valor del componente.
- onbeforeunload(): se lanza al intentar cerrar una ventana.
- onclick(): al hacer clic en un elemento.
- ondblclick(): al hacer doble click.
- onerror(): si se produce un error al cargar la página web o una imagen.
- onfocus(): cuando un componente obtiene el foco.
- onkeydown(): al pulsar cualquier tecla.
- onkeypress(): al pulsar una tecla correspondiente a un carácter.
- onkeyup(): al leventar cualquier una tecla.
- onload(): se produce al terminar de cargarse la página web o una imagen.
- onmousedown(): al presionar un botón del ratón.
- onmousemove(): se ha movido el ratón.
- onmouseout(): el cursor del ratón sale del área ocupada por un elemento.
- onmouseover(): el cursor del ratón entra en el área ocupada por un elemento.
- onmouseup(): al dejar de presionar un botón del ratón.
- onresize(): al redimensionar una ventana o frame.
- onselect(): cuando se selecciona un texto.
- onunload(): al salir de la página web.
Un poco más adelante veremos más detalladamente cómo implementarlos.
Para que algunos de estos eventos funcionen correctamente en versiones antiguas Internet Explorer es necesario declarar un <doctype>
Es recomendable definir el evento onload() para el Objeto Window() (como veremos en un ejemplo algo más adelante) en vez de en la etiqueta HTML <body>, ya que el evento se produce cuando se ha cargado completamente el contenido de la página web, incluidas imágenes, scripts, etc.
Puedes encontrar más información en el siguiente enlace: Eventos del DOM en JavaScript
Relacionado: [ Eventos en HTML ]
En el siguiente ejemplo definimos los eventos onload() y onBeforeUnload() para el Objeto Window(), de forma que se muestre un mensaje al cargarse todo el contenido de la página web, y un cuadro de diálogo desde el que el usuario podrá confirmar si desea cerrarla o no:
window.onload = function()
{
alert("Se ha cargado completamente la página web.");
}
window.onbeforeunload = function()
{
return "";
}
Modificando un poco el ejemplo anterior, al cargarse la página web definimos los eventos onmouseover() y onmouseout() para un elemento HTML llamado 'btnEnviar', de modo que se modificará su texto al situar el cursor del ratón sobre él, y se restaurará al salir de su área:
window.onload = function()
{
document.getElementById("btnEnviar").onmouseover = function() {
this.value = "Vas a enviar el formulario";
}
document.getElementById("btnEnviar").onmouseout = function() {
this.value = "Enviar el formulario";
}
}
Observa que el código fuente para definir los eventos lo hemos puesto dentro del evento onload() del Objeto Window() (que explicamos en la siguiente sección), el cual se procesa cuando se ha cargado todo el contenido de la página web: de no hacerlo así, corremos el riesgo de que se intente definir el evento de un elemento antes de que haya sido creado, lo que generaría un error.
Observa también que dentro de la definición de cada evento es necesario usar la palabra 'this', para hacer referencia al propio elemento.
Para eliminar los eventos creados de este modo, basta con redefinirlos dejándolos vacíos:
document.getElementById("btnEnviar").onmouseover = function() {}
document.getElementById("btnEnviar").onmouseout = function() {}
Esta forma de definir y eliminar eventos funciona en todos los navegadores web.
Otra forma de capturar eventos es aplicándolo a los elementos HTML usando los métodos attachEvent() (para Internet Explorer) o addEventListener() (para el resto de los navegadores web.
A continuación te mostramos un ejemplo de cómo implementar un evento que deberá capturarse cuando se haga clic en un botón cuyo atributo id es 'boton1':
<html>
<head>
<title>informaticapc.com - Curso de JavaScript</title>
<script type="text/javascript">
function mensaje()
{
alert("Haz hecho click");
}
// -------------------------
function cargar()
{
if( navigator.appName == "Microsoft Internet Explorer" )
document.getElementById("boton1").attachEvent( "onclick", mensaje );
else
document.getElementById("boton1").addEventListener( 'click', mensaje, false );
}
</script>
</head>
<body onload="cargar();">
<input type="button" id="boton1" name="boton1" value="Haz clic aquí" />
</body>
</html>
Observa que en caso de Internet Explorer escribimos el nombre del evento tal y como hemos visto hasta ahora en JavaScript, mientras que para los otros navegadores web se omite el 'on'.
Fíjate también en que indicamos el nombre de una función que deberá ejecutarse al producirse el evento. También podemos crearlas dinámicamente del siguiente modo:
if( navigator.appName == "Microsoft Internet Explorer" )
document.getElementById("boton1").attachEvent( "onclick", function(){ alert('Has hecho click'); } );
else
document.getElementById("boton1").addEventListener( 'click', function(){ alert('Has hecho click'); }, false );
El tercer parámetro de addEventListener() puede recibir los valores:
- true: el evento se propagará descendentemente en la rama del árbol DOM en la que se encuentra el elemento (se producirá primero en sus nodos padre).
- false: el evento se propagará ascendentemente partiendo desde el elemento para el que lo hemos definido, y propagándose hacia arriba en la rama del árbol DOM dentro de la que se halla.
Para eliminar los eventos creados en el primer ejemplo usaremos los métodos detachEvent() (para Internet Explorer) y removeEventListener() (para los demás navegadores web) del siguiente modo:
if( navigator.appName == "Microsoft Internet Explorer" )
document.getElementById("boton1").detachEvent( "onclick", mensaje );
else
document.getElementById("boton1").removeEventListener( 'click', mensaje, false );
