En las entradas anteriores veíamos como utilizar jQuery, en este caso vamos a ver como utilizar los eventos para controlar lo que sucede en nuestra web a través de jQuery.

Si bien con lo visto en las entradas anteriores podemos ejecutar diferentes ordenes de jQuery de forma que nuestra web se comporte de manera lineal, hay veces que nos interesa ejecutar diferentes ordenes dependiendo de donde pinchemos o donde nos situemos con el ratón, en este caso nos hace falta controlar los eventos o indicarle que es lo que queremos hacer cuando suceda uno de estos eventos.

Por ejemplo si al situarnos sobre un enlace queremos agregar a este un estilo distinto y restaurar el estilo cuando salgamos de dicho enlace restaurar el estilo que tenía antes, podemos usar la función onmouseover y onmouseout quedando algo similar a:

$("a").mouseover(function(){
    	$("a").addClass("estilocss");
});
$("a").mouseout(function(){
	$("a").removeClass("estilocss");
});

Siendo estiloscss un estilo definido en la hoja de estilos. También podríamos haber utilizado la función hover de la siguiente manera:

$("a").hover(function(){
    	$("a").addClass("estilocss");
},function(){
	$("a").removeClass("estilocss");
});

Si queremos que al pinchar en un enlace nos muestre un mensaje utilizaremos la función click. quedando algo similar a:

$("a").click(function(e){
	alert("has pulsado el enlace");
	e.preventDefault();
});

La última línea que hemos agregado (e.preventDefault()😉 es para que el enlace no se dirija a ninguna web, osea que no haga nada.

Los ejemplos anteriores los hemos realizado sobre enlaces, pero se podría hacer sobre párrafos, capas, imágenes o cualquier otro elemento, bastaría con sustituir «a» por el elemento que estemos utilizando o por la clase del elemento. Por ejemplo:

<div class="capa1">Esto es un ejercicio de prueba</div>
<div class="salida"></div>
<script type="text/javascript">
$(document).ready(function(){
    $(".capa1").click(function(){
	    var posicion=$(".capa1").offset();
	    var texto="Posicion izquierda "+posicion.left;
	    texto+="Posicion superior "+posicion.top;
	    alert(texto);
	    $(".salida").html(texto);
    });
});
</script>

En dicho ejemplo al pinchar en la capa1 nos saldrá un mensaje con la orden de alert en el que nos indica la posición de dicha capa además de visualizar en la capa salida dicha posición.