En los anteriores posts, estuve enseñando los diferentes eventos que ofrece jQuery. Por tanto, ahora es buena idea saber cómo se pueden usar eventos en jQuery.
A diferencia de JavaScript, jQuery simplifica la asignación de eventos y ahora con Microsoft forzando que todo el mundo use Windows 10, es cuando apenas hay incompatibilidades con los navegadores.
Para poder usar los eventos es mejor pensar cómo funciona la programación en jQuery. Se reduce en 3 pasos
Selecciona uno o más elementos
Los selectores de jQuery funcionan como los de CSS permitiendo escoger las partes de la página que quieres manipular. Antes de asignar un evento, quieres seleccionar los elementos con los que el visitante va a interactuar. Por ejemplo, qué quieres hacer si el visitante clica una imagen o la celda de una tabla? Y si pasa el ratón por un div?
Asignar un evento
Si miraste javaScript, debes saber que la mayoría de los eventos de DOM tienen un equivalente en jQuery. Para asignar un evento a un elemento, basta con añadir un punto, el nombre del evento y 2 paréntesis que en seguida explicaré por qué.
Si quieres realizar un acción cuando el usuario pasé el raton por cualquier imagen.
|
1 |
$('img').mouseover(); |
O si el usuario clica en los enlaces con una clase como «destello»
|
1 |
$('a.destello').mouseover(); o $('.destello').mouseover(); |
Pasar una función al evento
Ahora es cuando defines lo que pasa cuando el evento se produce. Para ello, se pasa una función al evento. La función contiene los comandos que correrán cuando el evento se dispare. Esto podría ser volver invisible un div o incluso desplazar un elemento.
Puedes pasar un función ya definida
|
1 |
$('#start').click(startSlideShow); |
Cuando asignas una función a un evento, se omite el () igual que en javaScript.
Otra manera y también la más usada, es pasando una función anónima al evento. La estructura básica de una función anónima
|
1 2 3 |
function(){ //Acciones } |
Ahora un ejemplo simple. Supongamos que tenemos un vínculo con el ID inicio. Queremos que dicho link al pasar el ratón por encima cambie de color.
Seleccionamos el elemento
|
1 |
$('#inicio') |
Asignamos el evento
|
1 |
$('#inicio').mouseover(); |
Añadimos un función anónima
|
1 2 3 |
$('#inicio').mouseover(function() { });// Fin del mouseover |
Añadimos las acciones necesarias, que sería darle color al vínculo.
|
1 2 3 4 5 |
$('#inicio').mouseover(function() { $('#inicio').css( "color", "red" ); });// Fin del mouseover |
Recuerda llamar a la librería jQuery y que el código este cerca del cierre del body.
Y hasta aquí usar eventos en jQuery. Espero que os haya gustado, a seguir picando 🙂