Guías de Make it Real
Search…
Escuchando eventos
Para escuchar eventos de uno o más elementos utiliza el método
on.Por ejemplo, si queremos escuchar el
click de todos los párrafos del documento podemos utilizar el siguiente código:1
$('p').on('click', function() {
2
alert("Hiciste click sobre un párrafo");
3
});
Copied!
Primero seleccionamos los elementos sobre los que queremos escuchar el evento con
$(selector) (en el ejemplo utilizamos $('p') para seleccionar todos los párrafos).El método
on recibe el nombre del evento que queremos escuchar (en el ejemplo el evento click) y una función, que es la que se ejecuta cuando ocurre el evento. En esta función escribimos el código que queremos que se ejecute cada vez que que ocurra el evento.A la función que recibe el método
on se le llama un callback y puede recibir un argumento con información del evento. De esto hablaremos más adelante.Nota: En algunos proyectos verás la siguiente forma de escuchar los eventos, que es equivalente a la anterior:
1
$('p').click(function() {
2
alert("Hiciste click sobre un párrafo");
3
});
Copied!
Sin embargo, nuestra recomendación es siempre utilizar la forma anterior utilizando
on.Eventos del mouse
Los eventos más comunes que puedes escuchar del mouse son los siguientes:
clickdblclick- doble clickmouseenter- se dispara cuando el mouse entra sobre alguno de los elementos seleccionados.mouseleave- se dispara cuando el mouse sale de alguno de los elementos seleccionados.mouseover- se dispara cuando el mouse entra o sale de alguno de los elementos seleccionados.mousemove- se dispara cuando el mouse se mueve dentro de alguno de los elementos seleccionados.
La función que le pasamos al método
on recibe un argumento con información del evento. Por ejemplo, a través de este objeto podemos obtener la posición del mouse cada vez que se mueve:1
$(document).on('mousemove', function(e) {
2
console.log("El mouse se encuentra en las coordenadas:" + e.pageX + ", " + e.pageY);
3
});
Copied!
Eventos del teclado
Existen tres eventos que puedes escuchar del teclado:
keydown- se dispara cuando oprimes una tecla.keypress- similar akeydownpero no aplica para teclas comoShift,Esc,Alt.keyup- se dispara cuando sueltas una tecla.
El método
which del evento retorna el código de la tecla oprimida:1
$(document).on('keyup', function(e) {
2
console.log("La tecla oprimida fue " + e.which);
3
});
Copied!
Eventos sobre formularios
Sobre los formularios (y los elementos del formulario) puedes escuchar los siguientes eventos:
blur- se dispara cuando un elemento pierde el foco.change- se dispara cuando un elemento cambia.focus- se dispara cuando un elemento recibe el foco.submit- se dispara cuando el formulario se envía.
Evitando la acción por defecto
Para evitar que ocurra la acción por defecto (p.e. que un link no cambie la página o que un formulario no sea enviado) puedes utilizar el método
preventDefault() sobre el argumento que llega en la función.Por ejemplo, el siguiente ejemplo intercepta todos los clicks sobre links y evita que cambie la página:
1
$('a').on('click', function(e) {
2
e.preventDefault();
3
alert("Oprimiste un link pero ha sido interceptado ... muajaja");
4
});
Copied!
Delegación de eventos
La mayoría de eventos se disparan primero sobre el elemento que ocurren, y después se disparan sobre el elemento padre, el padre del padre, y así sucesivamente hasta
document, y por último window.Para detener este proceso puedes utilizar el método
stopPropagation del evento:1
$('p').on('click', function(e) {
2
e.stopPropagation();
3
4
alert("Este evento no se va a propagar a los padres");
5
});
Copied!
$( document ).ready()
Una página no debe ser manipulada con jQuery hasta que el documento esté cargado completamente.
Hasta ahora hemos evadido este problema ubicando nuestro código al final de la página, pero esto no siempre es posible.
Si debes esperar a que toda la página cargue puedes usar el evento
ready:1
$(document).ready(function() {
2
console.log( "ready!" );
3
});
Copied!
Existe un atajo equivalente:
1
$(function() {
2
console.log( "ready!" );
3
});
Copied!
Nota: Recuerda que esto no es necesario si ubicas tu código jQuery al final de la página.
Last modified 4yr ago