Pecciola

Terzo appuntamento con questo tutorial dedicato a jQuery e secondo consecutivo dedicato agli eventi dopo che nella passata lezione abbiamo introdotto il concetto di evento con un esempio semplice, ma già ben esplicativo.

Metodo bind()

Se avete ben digerito l’argomento evento in jQuery, dopo aver visto all’opera l’esempio numero due, avreste potuto sollevare la domanda : ma, invece del metodo bind(), nell’esempio non potevamo utilizzare il classico evento semplice legato al collegamento?

Ovvero, invece che scrivere :

$(“.verde”).bind(“click”, function() {
$(“#quadratino”).removeClass().addClass(“bgverde”);

});

avremmo potuto leggermente semplificare il codice scrivendo quanto appreso nella prima lezione, ovvero :

$(“.rosso”).click (function() {
$(“#quadratino”).removeClass().addClass(“bgrosso”);

});

Il metodo bind(), pertanto, può spesso essere sostituito con altri metodi-scorciatoia a meno di due situazioni. In primis, qualora volessimo collegare due eventi ad una stessa funzione. Infatti, nel primo caso, avremmo potuto scrivere, legando due eventi :

$(“.verde”).bind(“click mouseover”, function() {
$(“#quadratino”).removeClass().addClass(“bgverde”);

});

cosa che diventava difficile, o meno snella, da scrivere utilizzando l’opzione dell’evento-funzione click.

In secondo luogo, il metodo bind diventa indispensabile qualora volessimo passare dei parametri alla funzione. Guardate all’opera questo esempio tenendo a mente che, in questo caso, come secondo argomento il metodo bind() accetta un oggetto JavaScript con dei dati ricavabili dalla proprietà .data di event.

Metodo load() e ready()

Ultimo cenno, prima di passare oltre, é obbligatorio per il ruolo ricoperto da load() e ready().
Si tratta di due metodi molto sfruttati dagli sviluppatori jQuery perché consentono di agire su due momenti importanti collegati al caricamento della pagina.

Infatti, load() permette di mandare in esecuzione una funzione solo dopo il caricamento totale e completo della pagina (fogli di stile, script e grafica compresa). Spesso lo si usa con l’oggetto window:

$(window).load(function () {
alert(‘Pagina caricata completamente!!’);
});

Il metodo ready(), invece, é utile qualora si voglia attendere non che tutta la pagina sia completamente caricata (ad esempio, le immagini), ma solo il DOM.
Eccovi un esempio classico :

$(document).ready(function() {
alert(‘Il DOM é stato caricato’);
});

E’ chiaro come racchiudere l’argomento eventi in due solo lezioni é ostico, ma credo abbiate comunque potuto cominciare a prendere confidenza con la sintassi di base di jQuery.

Prossimo appuntamento con funzioni e variabili.