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
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í.

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

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

mm

About

Desarrollador de software, lector compulsivo.

View all posts by