Los eventos permiten construir aplicaciones interactivas en el lado del cliente. Los eventos están siempre asociados a una acción sobre un elemento determinado.
Estos son los eventos más utilizados:
Evento | Tiene efecto sobre | Ocurre cuando | Manejador |
Abort | imágenes | El usuario cancela la carga de una imagen | onAbort |
Blur | ventanas y elementos de formularios | El usuario abandona la ventana o elemento (pierde el foco) | onBlur |
Change | text fields, textareas, select lists | El usuario cambia el valor de un elemento | onChange |
Click | buttons, radio buttons, checkboxes, submit buttons, reset buttons, links | El usuario pulsa sobre el elemento o el enlace | onClick |
Error | images, windows | La carga de la ventana o la imagen causa un error | onError |
Focus | windows and all form elements | El usuario pasa el control (foco) a un elemento determinado | onFocus |
KeyDown | documents, images, links, text areas | El usuario pulsa una tecla | onKeyDown |
KeyPress | documents, images, links, text areas | El usuario da una pulsación con una tecla o la mantiene pulsada | onKeyPress |
KeyUp | documents, images, links, text areas | El usuario deja de pulsar una tecla | onKeyUp |
Load | document body | El usuario carga una página en el navegador | onLoad |
MouseDown | documents, buttons, links | El usuario pulsa una tecla del ratón | onMouseDown |
MouseMove | El usuario mueve el ratón | onMouseMove | |
MouseOut | areas, links | El usuario mueve el cursor fuera del elemento | onMouseOut |
MouseOver | links | El usuario mueve el cursor dentro del elemento | onMouseOver |
MouseUp | documents, buttons, links | El usuario deja de pulsar una tecla del ratón | onMouseUp |
Move | windows | El usuario (o algún script) mueve una ventana | onMove |
Reset | forms | El usuario pulsa el botón de reset | onReset |
Resize | windows | El usuario (o algún script) redimensiona la ventana del navegador | onResize |
Select | text fields, textareas | El usuario selecciona el contenido de los elementos del formulario | onSelect |
Submit | forms | El usuario pulsa el botón para enviar un formulario | onSubmit |
Unload | document body | El usuario sale de la página (carga otra página o cierra esa ventana del navegador) | onUnload |
Su utilización es muy sencilla. Para indicar a JavaScript que se desea hacer el tratamiento de un determinado evento, se coloca el manejador correspondiente en la marca HTML del elemento:
<marca_HTML onEvento=expresión JavaScript>
Por ejemplo, podemos hacer que aparezca un mensaje cada vez que el usuario pulsa un botón:
…
<input type=’button’ name=’boton1′ value=’pulsa’ onClick = ‘alert(«Se ha pulsado»); return true;’ >
…
Lo más habitual es colocar una llamada a una función que se utilizará como manejador propiamente dicho del evento:
function manejador ( )
{
// funcionalidad del manejador
….
}
…
<input type=’button’ name=’boton1′ value=’pulsa’ onClick = ‘manejador()’ >
…
–
Artículo (C) Epsilon Eridani.