jquery: manejo de eventos

Después de haber aprendido a manejar el DOM aprenderemos a manejar eventos con jquery y volver la anterior lectura algo mucho más útil y pasar de una página plana a una página dinámica que interactúa con el usuario volviéndose mucho más atractiva a los ojos.

Eventos con el teclado

Cuando hablamos de eventos con el teclado tenemos 4 eventos en particular, el primero es cuando hacemos focus sobre un método de entrada, el segundo será cuando presionamos una tecla la cual se deriva el momento en que levantamos el dedo de esta y cuando tan solo presionamos la tecla y no levantamos el dedo.

Las podemos ver de la siguiente forma:

.focusout()

Cuando quitamos la atención de un texto “p” se ejecutará x función.

var fo = 0;
$("p").focusout(function() {
  fo++;
});

En este caso cada vez que el evento se cumpla, fo aumentará una unidad.

.keydown()

Cuando presionamos una tecla se ejecuta una función.

$('#target').keydown(function(data) {
  console.log(data.which);
});

En este caso cuando se presione la tecla en el div#target nos imprimirá el número de la tecla que se presione.

.keyup()

Cuando se levante el dedo de la tecla se ejecuta una función.

$('#target').keyup(function(data) {
  console.log(data.which);
});

En este caso cuando se levante la presión de  la tecla en el div#target nos imprimirá el número de la tecla que se presione.

.keypress()

Cuando se cumpla tanto el keydown como el keyup se ejecutará la función.

$('#target').keypress(function(data) {
  console.log(data.which);
});

En este caso cuando se presiona y se levante la presión de la tecla en el div#target nos imprimirá el número de la tecla que se presione.

En este caso tendrás que poner en práctica los eventos para que tengas mayor entendimiento.

Eventos con el mouse

.click()

Nos sirve para ejecutar una función cuando se dé un click sobre un elemento.

$('#target1').click(function(data) {
  alert('Ay!');
});

.dblclick()

Nos sirve para ejecutar una función cuando se dé doble click sobre un elemento.

$('#target2').dblclick(function(data) {
  alert('Doble Ay!');
});

.hover()

Nos sirve para que cuando se pase el mouse encima de un elemento se ejecute una función.

$('#target').hover(function(data) {
  alert('Pasaste encima mio !');
});

Solo te mencione los eventos más comunes y utilizados con el mouse si quieres ver mas entra a la documentación oficial.

Y recuerda practicar y entrar a la documentación oficial sobre eventos para averiguar y probar muchos más, siempre es bueno leer pero más importante es poner en práctica.