Tratamiento de eventos en JavaScript

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.