Aprende a asociar eventos a tus elementos en tus aplicaciones y sitios web a través de jQuery.

Sin duda alguna al construir una aplicación web, es necesario, tener un sistema de mensajería que notifique, que de ocurrir algún cambio en un elementos, dicho cambio sea reportado a este u otros elementos, que necesiten saber de lo ocurrido. A esto se conoce como eventos.

Los eventos son sucesos, representados por un mensaje, que contiene información asociada y relevante al evento, y es recibido por un oyente de ese mensaje, para realizar una acción de ser necesaria.

jQuery provee métodos para asociar controladores de eventos a selectores. Cuando un evento ocurre, la función provista es ejecutada.

Vincular Eventos a Elementos.

Usted tiene algunas opciones para la unión de selectores a eventos en jQuery, como:

.bind(), se conecta a uno o más controladores de eventos para los elementos seleccionados, y especifica una función a ejecutar cuando se produzca el evento.

$( "p" ).bind( "click", function( ) {
$( "span" ).text( "Click! ");
});

$( "p" ).bind( "dblclick", function() {
$( "span" ).text( "Double-click" );
});

.click(), se produce cuando se hace clic en un elemento.

.load(), método que carga datos de un servidor y pone los datos devueltos en el elemento seleccionado.

.mouseout(), se produce cuando el puntero del mouse sale del elemento seleccionado.

$( "p" )
.mouseout(function() {
$( "span" ).text( "mouse out" );
})
.mouseover(function() {
$( "span" ).text( "mouse over" );
});

.on(), concede uno o más controladores de eventos para los elementos seleccionados.

.off(), se utiliza con mayor frecuencia para eliminar eventos asociados con el método on().

$("#aDiv").click(function(){
console.log("Hiciste un click");
i++;
if(i == 2){
$("#aDiv").off('click');
}
});

También contamos con eventos del teclado como:

.focusout(), enlaza un controlador de eventos para eventos focus, como una selección de input.

.keydown(),evento keydown se envía a un elemento cuando el usuario presiona primero una tecla en el teclado. Se puede acoplar a cualquier elemento, pero el evento sólo se envía al elemento que tiene el foco.

.keyup(), el evento keyup se envía a un elemento cuando el usuario suelta una tecla en el teclado. Se puede acoplar a cualquier elemento, pero el evento sólo se envía al elemento que tiene el foco.

.keypress(), evento que se envía a un elemento cuando el usuario presiona una tecla del teclado.

Bien estos son algunos de los eventos que nos ofrece jquery, más adelante hablaremos de algunos de ellos. Este es un ejemplo de evento:

$("#aDiv").bind('click', function(){
console.log("Handler 1");
});
$("#aDiv").click(function(){
console.log("Hiciste un click");
});

En este ejemplo, al hacer clic en el div, adiv, verá los dos mensajes. Debido a que jQuery está manejando todo de los detalles por detrás de escena, .bind(), .click(), etc. son los mismos independientemente de que navegador interpreta el código. Esto es, todo un alivio, puesto que las incompatibilidades siempre están presentes.

También podremos asociar un evento al método on(), de está manera:

$("#aDiv").on('click', function(){
console.log("Handler 3");
});

Vincular eventos para ejecutarse una sola vez, esto lo podemos hacer a través del método one, de está manera

$("#bDiv").one('click', function(){
console.log("Se ejecuta una vez");
});

Bien en este tutorial hemos conocido los distintos métodos que tiene la librería de jQuery, para poder vincular nuestros elementos HTML a posibles eventos, recuerda que tenemos un curso de jQuery disponible en DevCode, nos leemos en un próximo tutorial.