JavaScript - Tratamiento de eventos
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:
Abort
onAbort()
Tiene efecto sobre: imágenes.
El usuario cancela la carga de una imagen
Blur
onBlur()
Tiene efecto sobre: ventanas y elementos de formularios
El usuario abandona la ventana o elemento (pierde el foco)
Change
onChange()
Tiene efecto sobre: text fields, textareas, select lists
El usuario cambia el valor de un elemento
Click
onClick()
Tiene efecto sobre: buttons, radio buttons, checkboxes, submit buttons, reset buttons, links
El usuario pulsa sobre el elemento o el enlace
Error
onError()
Tiene efecto sobre: images, windows
La carga de la ventana o la imagen causa un error
Focus
onFocus()
Tiene efecto sobre: windows y elementos de un formulario
El usuario pasa el control (foco) a un elemento determinado
KeyDown
onKeyDown()
Tiene efecto sobre: documents, images, links, text areas
El usuario pulsa una tecla.
KeyPress
onKeyPress()
Tiene efecto sobre: documents, images, links, text areas
El usuario da una pulsación con una tecla o la mantiene pulsada.
KeyUp
onKeyUp()
Tiene efecto sobre: documents, images, links, text areas
El usuario deja de pulsar una tecla
Load
onLoad()
Tiene efecto sobre: document body
El usuario carga una página en el navegador
MouseDown
onMouseDown()
Tiene efecto sobre: documents, buttons, links
El usuario pulsa una tecla del ratón
MouseMove
onMouseMove()
El usuario mueve el ratón
MouseOut
onMouseOut()
Tiene efecto sobre: areas, links
El usuario mueve el cursor fuera del elemento
MouseOver
onMouseOver()
Tiene efecto sobre: links
El usuario mueve el cursor dentro del elemento
MouseUp
onMouseUp()
Tiene efecto sobre: documents, buttons, links
El usuario deja de pulsar una tecla del ratón
Move
onMove()
Tiene efecto sobre: windows
El usuario (o algún script) mueve una ventana
Reset
onReset()
Tiene efecto sobre: forms
El usuario pulsa el botón de reset
Resize
onResize()
Tiene efecto sobre: windows
El usuario (o algún script) redimensiona la ventana del navegador
Select
onSelect()
Tiene efecto sobre: text fields, textareas
El usuario selecciona el contenido de los elementos del formulario
Submit
onSubmit()
Tiene efecto sobre: forms
El usuario pulsa el botón para enviar un formulario
Unload
onUnload()
Tiene efecto sobre: document body
El usuario sale de la página (carga otra página o cierra esa ventana del navegador)
Manejar eventos
Su utilización es muy sencilla.
Para indicar a JavaScript que se desea hacer el tratamiento de un determinado evento, se puede colocar 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()'>