JavaScript: Esdeveniments jQuery

En aquest article de JavaScript s'aborda tot allò relacionat amb els esdeveniments a JavaScript: jQuery.

Introducció

jQquery permet associar controladors d’esdeveniments (event handlers) a selectors.

• Dins de la funció controladora de l’esdeveniment, la paraula reservada $(this) fa referència a l'element sobre el qual ha tingut lloc.
• La funció controladora d’esdeveniments pot rebre un objecte de tipus event, que pot ser utilitzat per conèixer la naturalesa d'aquest, prevenir el seu comportament per defecte, etc.

Vincular esdeveniments a elements

• Mitjançant un mètode reduït:

$('document').ready(function(){
   $('p').click(function() {
      console.log('click');
   });
});

Mitjançant el mètode $.fn.on, que permet associar la mateixa funció controladora a diferents esdeveniments, passar-li informació, etc.

Exemple 1

$('input').on('click blur', { valor : 'bar' }, function(eventObject) {
   console.log(eventObject.type, eventObject.data.valor);
   }
);

Exemple 2

$('p').on({
   'click': function() {
      console.log('clickeado');
      },
   'mouseover': function() {
      console.log('sobrepasado');
      }
});

Vincular esdeveniments per a executar un únic cop

$('document').ready(function(){
   $('p').one('click', function() {
       console.log('S'ha fet click per primera vegada');
       $(this).click(function(){
           console.log('S'ha fet click novament');
           }
       );
});

Desvincular esdeveniments d'elements

Desvincular tots els controladors d'un esdeveniment

$('p').off('click');

Desvincular un controlador en particular d'un esdeveniment

function pinta(){
   $(this).css('background-color','#E0F8E0');
}
function escriu(){
   $(this).val('hola');
   console.log('escrivim');
}
$('input').on('focus',pinta).on('focus',escriu);
   //Per deshabilitar la funció controladora escriu() de l'event 'focus', cal escriure:
$('input').off('focus',escriu);

L'objecte eventObject

La funció controladora pot rebre un objecte event, que disposa de diferents mètodes i propietats:.

Aquí trobareu un llistat complet:

http://api.jquery.com/category/events/event-object/

Algunes de les més interessants:

• pageX, pageY: coordenades del ratolí respecte als límits del document.
• type: tipus d'event
• which: tecla o botó premuts
• data: informació passada a la funció controladora (sols mètode $fn.on)
• target: element del DOM on s'ha iniciat l'event
• preventDefault: anul.la l'acció programada per defecte per a l'event en qüestió

Exemple 1

$('document').ready(function(){
  $('a').click(function(e) {
     if ($(this).attr('href').match('violence')) {
        e.preventDefault();
     }
  });
});

Exemple 2

$('document').ready(function(){
  $('input').on('keydown', function(e) {
    console.log(e.which); //retorna el codi de la tecla
  });
});

Disparar esdevniments

$('document').ready(function(){
   var foo = function(e) {
     if (e) {
        console.log(e.type);
     } else {
        console.log(‘Això no ve d’aquest esdev.’);
     }
};
$('p').click(foo);
$('p').trigger('click'); //disparem l’esdev. click sobre el paràgraf
});