Eventos archivos -

Los eventos nos sirven para que nuestros elementos HTML tengan funcionalidad, ya sea al dar clic sobre ellos, pasar el puntero encima, o cuando escribimos en las cajas de texto, por medio de javascript existen los eventos para darle esa funcionalidad a nuestros objetos, pero con jquery también podemos hacerlo, de una forma más rápida, ya que por medio de los selectores podemos dar la funcionalidad a muchos elementos en pocas líneas de código.

Para ver la funcionalidad de los eventos, veamos el siguiente código.

Código HTML

<select id="combo">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>
<input id="boton1"  type="button" value="click boton 1" /><input id="boton2"  type="button" value="click boton 2" />

Código Jquery

$(document).ready(function(){
	$("#combo").change(function(){
		alert($(this).val())
	});

	$("input").click(function(){
		alert("clic al botón: "+$(this).attr("id"))
	})
});

En el anterior código tenemos un combobox y un botón, a los cuales seleccionamos con los selectores de jquery, al primero por medio del evento change (el cual se invoca al cambiar la opción seleccionada en el combobox), le damos una funcionalidad que nos muestre la opción seleccionada en un alert(), y el segundo selector, seleccionamos todos los elementos input (que en este caso son dos botones), y en la misma línea le aplicamos el evento clic, no hay necesidad de hacer la funcionalidad botón por botón, gracias a los selectores nos ahorramos ese trabajo, y por medio de $(this), accedemos al botón presionado y a sus atributos (los cuales podemos acceder por las funciones de jquery).

Nota: Al utilizar la linea $(document) accedemos a el documento, y este tiene la función ready(), la cual recibe una función anónima, utilizando esta linea, hacemos que nuestro código interno en la función anónima se ejecute hasta que ya este cargado los objetos DOM, osea, cuando termine de cargar todos los elementos HTML, esta es una buena practica que debe ser realizada siempre.

Así de sencillo aplicamos los eventos por medio de jquery. Para ver todos los eventos que puede asignar a los elementos HTML pueden ir dando clic a esta liga http://api.jquery.com/category/events.

Por ultimo aqui el código en ejecución:

Ir al Capitulo Siguiente (7.- Las funciones Show y Hide).

Ir al Capitulo Anterior (5.- La función Each).

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)

Etiqueta: Eventos

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

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