En este capítulo trataremos los eventos en javascript, los cuales por medio de los elementos HTML, podemos invocar y así tener la relación entre los componentes HTML y la funcionalidad de javascript.
Hasta ahora solo hemos visto código javascript sin interacción con los elementos HTML, es momento de ver como se puede ejecutar el código javascript desde un botón, o cuando se carga la pagina, o cuando salimos de ella.
Para comenzar muestro la lista de eventos que pueden ser utilizados por los elementos de HTML y en la misma lista planteo que elementos pueden usar dichos eventos, la lista es la siguiente:
| Evento | Elementos | Acción |
| onAbort | Image | El usuario interrumpe la carga de una imagen |
| onBlur | Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, window | El elemento pierde el foco |
| onChange | FileUpload, Select, Text, Textarea | El valor de un campo de formulario cambia |
| onClick | Todos | Se hace click en un objeto html |
| onDblClick | document, Link | Se hace doble click en un objeto html |
| onDragDrop | window | El usuario arrastra y suelta un objeto en la ventana |
| onError | Image, window | La carga de un documento o imagen produce un error |
| onFocus | Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, window | Una ventana, marco o elemento de formulario recibe el foco |
| onKeyDown | document, Image, Link, Textarea | El usuario pulsa una tecla en el elemento |
| onKeyPress | document, Image, Link, Textarea | El usuario mantiene pulsada una tecla en el elemento |
| onKeyUp | document, Image, Link, Textarea | El usuario libera una tecla en el elemento |
| onLoad | document, Image, Link, Textarea | El navegador termina la carga de una ventana |
| onMouseDown | Image, Layer, window | El usuario pulsa un botón del ratón |
| onMouseMove | Screen | El usuario mueve el puntero |
| onMouseOut | Layer, Link | El puntero abandona una área de un elemento |
| onMouseOver | Layer, Link | El puntero entra en un área de un elemento |
| onMouseUp | Button, document, Link | El usuario libera un botón del ratón |
| onMove | window | Se mueve una ventana o un marco |
| onReset | Form | El usuario limpia un formulario |
| onResize | window | Se cambia el tamaño de una ventana o marco |
| onSelect | Text, Textarea | Se selecciona el texto del campo texto o área de texto de un formulario |
| onSubmit | Form | El usuario envía un formulario |
| onUnload | Window | El usuario abandona una página |
Este listado tiene todos los eventos posibles que pueden ejecutarse para activar el código javascript por medio de los elementos html, también contiene los elementos a los que puede aplicarse dicho evento, veamos un ejemplo para ejecutar el evento onclick cuando presionamos un botón, y seria de la siguiente manera:
Código HTML
<input type="button" onclick="holaMundo();" value="hola mundo">
Código Javascript
function holaMundo(){
alert("hola mundo!")
}
De esta manera al presionar en el botón ejecutaríamos la función holaMundo() que escribimos en javascript.
El utilizar eventos nos ayuda a crear la relación entre el código html y el código javascript y poder lograr animaciones, modificaciones dinámicas en el contenido html, validaciones, y cualquier cosa que se nos ocurra para modificar la página en tiempo de ejecución.
Ahora veamos un ultimo ejemplo utilizando el método onload, el cual se activa al cargar un script o una pagina HTML, y de la siguiente forma es como se utiliza:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Eventos</title>
<script>
function holaMundo(){
alert("hola mundo")
}
</script>
</head>
<body onload="alert('hola amigo')">
<input type="button" onclick="holaMundo()" value="hola mundo" />
</body>
</html>
En el elemento HTML body, el evento onload, ejecuta un mensaje al cargar la pagina.
Para ver el código ejecutándose den clic aquí.