Negli esempi precedenti abbiamo usato .bind() per associare delle funzioni (dette handlers)
agli eventi. Questo metodo prevede come primo argomento una stringa che
definisca l'evento a cui associare una funzione oppure più eventi
separati da uno spazio. Gli eventi supportati sono: blur, focus,.
load, resize, scroll, unload, beforeunload, click, dblclick, mousedown,
mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave,
change, select, submit, keydown, keypress, keyup, error
Come secondo agomento .bind() accetta sia una funzione (come già visto in precedenza) oppure un oggetto JavaScript con dei dati ricavabili dalla proprietà .data di event. In quest'ultimo caso la funzione da associare diventa il terzo agomento:
$(":text").bind("focus blur", {"background-color" : "#FFFFCC"}, function (event) {
if (event.type == "focus") {
$(this).css(event.data);
} else {
$(this).css("background-color","");
}
});
Ecco questo script in azione.
Lanciare e Cancellare le associazioni
Come è possibile associare degli handlers, allo stesso modo
è possibile rimuoverli oppure lanciarli senza che l'evento sia
realmente accaduto. Nel primo caso utilizzeremo .unbind(), nel quale possiamo specificare sia gli eventi da prendere in considerazione, sia specifiche funzioni da rimuovere:
$(":text").unbind(); // rimuovi tutti gli eventi dai campi di testo
$(":text").unbind("blur focus"); //rimuovi gli handlers per gli eventi focus e blur
$(":text").unbind("blur",blurFunction); // rimuovi uno specifico handler per l'evento blur
Ecco l'esempio precedente con la possibilità di eleminare le associazioni.
Nel caso in cui volessimo lanciare un evento specifico, invece, jQuery mette a disposizione due metodi: .trigger() e .triggerHandler(). Nella pratica questi metodi sono utili per aprire una galleria immagini da un link diverso da una miniatura:
$("#lanciaGalleria").bind("click",function (event) {
event.preventDefault();
$('a.galleria:first').trigger('click');
});
Questi due metodi producono lo stesso effetto, tuttavia la differenza sta nel fatto che .triggerHandler() non lancia gli eventi predefiniti dell'elemento e agisce solo sul primo elemento di una collezione. L'esempio precedente può allora essere riscritto così:
$("#lanciaGalleria").bind("click",function () {
$('a.galleria').triggerHandler('click');
});