Como todo framework javascript que se precie, Jquery también se encarga de la gestión de eventos de nuestras páginas. Tratándose de Jquery esta claro que con poco código podemos hacer mucho.
Hay varias formas de asignar una función a un evento. Nosotros usaremos al método bind de Jquery. Este evento recibe ( obligatoriamente ) dos parametros.
bind( evento, funcion )
Los posibles eventos son: blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error.
Os hemos preparado cuatro ejemplos para que comprobéis la sencillez de su uso. Podéis verlos en acción en este enlace. Cualquier duda que os surja no dudéis en comentarla.
Ejemplo 1 – Click \ Dblclick
En este ejemplo enlazamos los eventos click y doble click a un div. Cuando se lanza el evento llamamos a una función que cambia el texto que hay dentro del segundo div.
HTML:
<div style=”position: relative; height: 100px; margin: 20px;”>
<div id=”div_ejemplo1″ style=”width: 100px; height: 100px; background:#FF0000; position:absolute; top:0; left: 0;”></div>
<div id=”div_ejemplo1_texto” style=”padding: 10px; height: 80px; position:absolute; top:0; left: 110px; “>Haz click o doble click en el cuadrado</div>
</div>
Javascript:
<script type=”text/javascript”>
$(“#div_ejemplo1″).bind( “click”, function(e)
{
var str = “Has echo click en el cuadrado en el punto (” + e.pageX + “,” + e.pageY + “)”;
$(“#div_ejemplo1_texto”).text( str );
});
$(“#div_ejemplo1″).bind( “dblclick”, function(e)
{
var str = “Has echo doble click en el cuadrado en el punto (” + e.pageX + “,” + e.pageY + “)”;
$(“#div_ejemplo1_texto”).text( str );
});
</script>
Ejemplo 2 – Mouseenter \ Mouseleave
En este ejemplo puedes ver como cambiamos la clase del primer div al entrar y salir en el div.
HTML:
<div style=”position: relative; height: 100px; margin: 20px;”>
<div id=”div_ejemplo2″ style=”width: 100px; height: 100px; position:absolute; top:0; left: 0;”></div>
<div id=”div_ejemplo2_texto” style=”padding: 10px; height: 80px; position:absolute; top:0; left: 110px; “>Pasa por encima del cuadrado</div>
</div>
CSS:
<style>
#div_ejemplo2 { background: #FF0000; }
#div_ejemplo2.over { background: #00FF00; }
</style>
Javascript:
<script type=”text/javascript”>
$(“#div_ejemplo2″).bind( “mouseenter mouseleave”, function(e)
{
$(“#div_ejemplo2″).toggleClass(“over”);
});
</script>
Ejemplo 3 – Añadir \ Eliminar eventos
Igual que enlazamos eventos con el método bind, también puedes eliminar este enlace. Para ello llamaremos al método unbind. En este ejemplo:
$(“#div_ejemplo3″).unbind( “mouseenter” );
Ejemplo 4 – Alternar funciones en Click
La verdad es que no le veo la utilidad a esta función. Con ella puedes ejecutar varias funciones con el evento click de un objeto. Las funciones no se ejecutan a la vez, sino que van alternándose. Una cada vez. Para ello llamaremos a la función toggle. En el ejemplo lo utilizamos para ir cambiando el color de fondo del div. El código js es:
<script type=”text/javascript”>
$(“#div_ejemplo4″).toggle(
function() { $(“#div_ejemplo4″).css({“background”:”#099000″ })},
function() { $(“#div_ejemplo4″).css({“background”:”#00FF00″ })},
function() { $(“#div_ejemplo4″).css({“background”:”#000990″ })},
function() { $(“#div_ejemplo4″).css({“background”:”#0000FF” })},
function() { $(“#div_ejemplo4″).css({“background”:”#900009″ })},
function() { $(“#div_ejemplo4″).css({“background”:”#FF0000″ })}
);
</script>
