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

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

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)