0
Eventos de jаvascript
Los eventos HTML son cosas que suceden a los elementos HTML. Cuando se utiliza jаvascript en páginas HTML, jаvascript puede reaccionar en estos eventos.Eventos HTML
Un evento HTML puede ser algo que hace el navegador, o algo que hace un . Aquí hay algunos ejemplos de eventos HTML:- Una página web HTML ha terminado de cargarse
- Se cambió un campo de entrada HTML
- Se hizo clic en un botón HTML
HTML permite que los atributos del manejador de eventos, con código jаvascript, se agreguen a los elementos HTML.
Tipos de eventos
En este modelo, cada elemento o etiqueta XHTML define su propia lista de posibles eventos que se le pueden asignar. Un mismo tipo de evento (por ejemplo, pinchar el botón izquierdo del ratón) puede estar definido para varios elementos XHTML diferentes y un mismo elemento XHTML puede tener asociados varios eventos diferentes.
El nombre de cada evento se construye mediante el prefijo on, seguido del nombre en inglés de la acción asociada al evento. Así, el evento de pinchar un elemento con el ratón se denomina onclick y el evento asociado a la acción de mover el ratón se denomina onmousemove.
La siguiente tabla resume los eventos más importantes definidos por jаvascript:
| Evento | Descripción | Elementos para los que está definido |
|---|---|---|
onblur |
Deseleccionar el elemento | <button>, <input>, <label>, <select>, <textarea>, <body> |
onchange |
Deseleccionar un elemento que se ha modificado | <input>, <select>, <textarea> |
onclick |
Pinchar y soltar el ratón | Todos los elementos |
ondblclick |
Pinchar dos veces seguidas con el ratón | Todos los elementos |
onfocus |
Seleccionar un elemento | <button>, <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> |
onmousedown |
Pulsar (sin soltar) un botón del ratón | Todos los elementos |
onmousemove |
Mover el ratón | Todos los elementos |
onmouseout |
El ratón "sale" del 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 pulsado en el ratón | Todos los elementos |
onreset |
Inicializar el formulario (borrar todos sus datos) | <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 (por ejemplo al cerrar el navegador) | <body> |
Los eventos más utilizados en las aplicaciones web tradicionales son onload para esperar a que se cargue la página por completo, los eventos onclick, onmouseover, onmouseout para controlar el ratón y onsubmit para controlar el envío de los formularios.
Algunos eventos de la tabla anterior (onclick, onkeydown, onkeypress, onreset, onsubmit) permiten evitar la "acción por defecto" de ese evento. Más adelante se muestra en detalle este comportamiento, que puede resultar muy útil en algunas técnicas de programación.
Las acciones típicas que realiza un en una página web pueden dar lugar a una sucesión de eventos. Al pulsar por ejemplo sobre un botón de tipo <input type="submit"> se desencadenan los eventos onmousedown, onclick, onmouseup y onsubmit de forma consecutiva.
Manejadores de eventos
Un evento de jаvascript por sí mismo carece de utilidad. Para que los eventos resulten útiles, se deben asociar funciones o código jаvascript a cada evento. De esta forma, cuando se produce un evento se ejecuta el código indicado, por lo que la aplicación puede responder ante cualquier evento que se produzca durante su ejecución.
Las funciones o código jаvascript que se definen para cada evento se denominan "manejador de eventos" y como jаvascript es un lenguaje muy flexible, existen varias formas diferentes de indicar los manejadores:
- Manejadores como atributos de los elementos XHTML.
- Manejadores como funciones jаvascript externas.
- Manejadores "semánticos".
Manejadores de eventos como atributos XHTML
Se trata del método más sencillo y a la vez menos profesional de indicar el código jаvascript que se debe ejecutar cuando se produzca un evento. En este caso, el código se incluye en un atributo del propio elemento XHTML. En el siguiente ejemplo, se quiere mostrar un mensaje cuando el pinche con el ratón sobre un botón:
<input type="button" value="Pinchame y verás" onclick="alert('Gracias por pinchar');" />En este método, se definen atributos XHTML con el mismo nombre que los eventos que se quieren manejar. El ejemplo anterior sólo quiere controlar el evento de pinchar con el ratón, cuyo nombre es onclick. Así, el elemento XHTML para el que se quiere definir este evento, debe incluir un atributo llamado onclick.
El contenido del atributo es una cadena de texto que contiene todas las instrucciones jаvascript que se ejecutan cuando se produce el evento. En este caso, el código jаvascript es muy sencillo (alert('Gracias por pinchar');), ya que solamente se trata de mostrar un mensaje.
En este otro ejemplo, cuando el pincha sobre el elemento <div> se muestra un mensaje y cuando el pasa el ratón por encima del elemento, se muestra otro mensaje:
<div onclick="alert('Has pinchado con el ratón');" onmouseover="alert('Acabas de pasar el ratón por encima');">
Puedes pinchar sobre este elemento o simplemente pasar el ratón por encima
</div>Este otro ejemplo incluye una de las instrucciones más utilizadas en las aplicaciones jаvascript más antiguas:
<body onload="alert('La página se ha cargado completamente');">
...
</body>El mensaje anterior se muestra después de que la página se haya cargado completamente, es decir, después de que se haya descargado su código HTML, sus imágenes y cualquier otro objeto incluido en la página.
El evento onload es uno de los más utilizados ya que, como se vio en el capítulo de DOM, las funciones que permiten acceder y manipular los nodos del árbol DOM solamente están disponibles cuando la página se ha cargado completamente.
Manejadores de eventos y variable this
jаvascript define una variable especial llamada this que se crea automáticamente y que se emplea en algunas técnicas avanzadas de programación. En los eventos, se puede utilizar la variable this para referirse al elemento XHTML que ha provocado el evento. Esta variable es muy útil para ejemplos como el siguiente:
Cuando el pasa el ratón por encima del <div>, el color del borde se muestra de color negro. Cuando el ratón sale del <div>, se vuelve a mostrar el borde con el color gris claro original.
Elemento <div> original:
<div id="contenidos" style="width:150px; height:60px; border:thin solid silver">
Sección de contenidos...
</div><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>El código anterior es demasiado largo y demasiado propenso a cometer errores. Dentro del código de un evento, jаvascript crea automáticamente la variable this, que hace referencia al elemento XHTML que ha provocado el evento. Así, el ejemplo anterior se puede reescribir de la siguiente manera:
<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>El código anterior es mucho más compacto, más fácil de leer y de escribir y sigue funcionando correctamente aunque se modifique el valor del atributo id del <div>.
Manejadores de eventos como funciones externas
La definición de los manejadores de eventos en los atributos XHTML es el método más sencillo pero menos aconsejable de tratar con los eventos en jаvascript. El principal inconveniente es que se complica en exceso en cuanto se añaden algunas pocas instrucciones, por lo que solamente es recomendable para los casos más sencillos.
Si se realizan aplicaciones complejas, como por ejemplo la validación de un formulario, es aconsejable agrupar todo el código jаvascript en una función externa y llamar a esta función desde el elemento XHTML.
Siguiendo con el ejemplo anterior que muestra un mensaje al pinchar sobre un botón:
<input type="button" value="Pinchame y verás" onclick="alert('Gracias por pinchar');" />function muestraMensaje() {
alert('Gracias por pinchar');
}
<input type="button" value="Pinchame y verás" onclick="muestraMensaje()" />Esta técnica consiste en extraer todas las instrucciones de jаvascript y agruparlas en una función externa. Una vez definida la función, en el atributo del elemento XHTML se incluye el nombre de la función, para indicar que es la función que se ejecuta cuando se produce el evento.
La llamada a la función se realiza de la forma habitual, indicando su nombre seguido de los paréntesis y de forma opcional, incluyendo todos los argumentos y parámetros que se necesiten.
El principal inconveniente de este método es que en las funciones externas no se puede seguir utilizando la variable thisy por tanto, es necesario pasar esta variable como parámetro a la función:
function resalta(elemento) {
switch(elemento.style.borderColor) {
case 'silver':
case 'silver silver silver silver':
case '#c0c0c0':
elemento.style.borderColor = 'black';
break;
case 'black':
case 'black black black black':
case '#000000':
elemento.style.borderColor = 'silver';
break;
}
}
<div style="width:150px; height:60px; border:thin solid silver" onmouseover="resalta(this)" onmouseout="resalta(this)">
Sección de contenidos...
</div>En el ejemplo anterior, la función externa es llamada con el parámetro this, que dentro de la función se denomina elemento. La complejidad del ejemplo se produce sobre todo por la forma en la que los distintos navegadores almacenan el valor de la propiedad borderColor.
Mientras que Firefox almacena (en caso de que los cuatro bordes coincidan en color) el valor black, Internet Explorer lo almacena como black black black black y Opera almacena su representación hexadecimal #000000.
Manejadores de eventos semánticos
Los métodos que se han visto para añadir manejadores de eventos (como atributos XHTML y como funciones externas) tienen un grave inconveniente: "ensucian" el código XHTML de la página.
Como es conocido, una de las buenas prácticas básicas en el diseño de páginas y aplicaciones web es la separación de los contenidos (XHTML) y su aspecto o presentación (CSS). Siempre que sea posible, también se recomienda separar los contenidos (XHTML) y su comportamiento o programación (jаvascript).
Mezclar el código jаvascript con los elementos XHTML solamente contribuye a complicar el código fuente de la página, a dificultar la modificación y mantenimiento de la página y a reducir la semántica del documento final producido.
Afortunadamente, existe un método alternativo para definir los manejadores de eventos de jаvascript. Esta técnica es una evolución del método de las funciones externas, ya que se basa en utilizar las propiedades DOM de los elementos XHTML para asignar todas las funciones externas que actúan de manejadores de eventos. Así, el siguiente ejemplo:
<input id="pinchable" type="button" value="Pinchame y verás" onclick="alert('Gracias por pinchar');" />
// Función externa
function muestraMensaje() {
alert('Gracias por pinchar');
}
// Asignar la función externa al elemento
document.getElementById("pinchable").onclick = muestraMensaje;
// Elemento XHTML
<input id="pinchable" type="button" value="Pinchame y verás" />- Asignar un identificador único al elemento XHTML mediante el atributo id.
- Crear una función de jаvascript encargada de manejar el evento.
- Asignar la función externa al evento correspondiente en el elemento deseado.
El último paso es la clave de esta técnica. En primer lugar, se obtiene el elemento al que se desea asociar la función externa:
document.getElementById("pinchable");document.getElementById("pinchable").onclick = ...document.getElementById("pinchable").onclick = muestraMensaje;// Asignar una función externa a un evento de un elemento
document.getElementById("pinchable").onclick = muestraMensaje;
// Ejecutar una función y guardar su resultado en una propiedad de un elemento
document.getElementById("pinchable").onclick = muestraMensaje();El único inconveniente de este método es que la página se debe cargar completamente antes de que se puedan utilizar las funciones DOM que asignan los manejadores a los elementos XHTML. Una de las formas más sencillas de asegurar que cierto código se va a ejecutar después de que la página se cargue por completo es utilizar el evento onload:
window.onload = function() {
document.getElementById("pinchable").onclick = muestraMensaje;
}window.onload = function() {
...
}function resalta() {
// Código jаvascript
}
window.onload = function() {
var formulario = document.getElementById("formulario");
var camposInput = formulario.getElementsByTagName("input");
for(var i=0; i<camposInput.length; i++) {
if(camposInput[i].type == "text") {
camposInput[i].onclick = resalta;
}
}
}
Comentarios