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);