6.- Eventos – Curso Básico de #Javascript #6

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
onAbortImageEl usuario interrumpe la carga de una imagen
onBlurButton, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, windowEl elemento pierde el foco
onChangeFileUpload, Select, Text, TextareaEl valor de un campo de formulario cambia
onClickTodosSe hace click en un objeto html
onDblClickdocument, LinkSe hace doble click en un objeto html
onDragDropwindowEl usuario arrastra y suelta un objeto en la ventana
onErrorImage, windowLa carga de un documento o imagen produce un error
onFocusButton, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, windowUna ventana, marco o elemento de formulario recibe el foco
onKeyDowndocument, Image, Link, TextareaEl usuario pulsa una tecla en el elemento
onKeyPressdocument, Image, Link, TextareaEl usuario mantiene pulsada una tecla en el elemento
onKeyUpdocument, Image, Link, TextareaEl usuario libera una tecla en el elemento
onLoaddocument, Image, Link, TextareaEl navegador termina la carga de una ventana
onMouseDownImage, Layer, windowEl usuario pulsa un botón del ratón
onMouseMoveScreenEl usuario mueve el puntero
onMouseOutLayer, LinkEl puntero abandona una área de un elemento
onMouseOverLayer, LinkEl puntero entra en un área de un elemento
onMouseUpButton, document, LinkEl usuario libera un botón del ratón
onMovewindowSe mueve una ventana o un marco
onResetFormEl usuario limpia un formulario
onResizewindowSe cambia el tamaño de una ventana o marco
onSelectText, TextareaSe selecciona el texto del campo texto o área de texto de un formulario
onSubmitFormEl usuario envía un formulario
onUnloadWindowEl 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í.

Ir Capítulo Siguiente (7.- El objeto document)

Ir Capítulo Anterior (5.- Programación Orientada a Objetos)