In javascript la gestione di come un documento gestisce gli eventi non è semplice ed è stata implementata diversamente nei diversi browser.
Esistono due modalità di comportamento chiamate:
JQuery implementa l'event bubbling. Una difficoltà potrebbe nascere per esempio nel caso volessi cambiare l'elemento cliccabile che mi consente di aprire e chiudere il pannello. Se invece che l'h3 volessi fare cliccabile il div contenitore dei bottoni accadrebbe che ogni volta che premessi su un bottone si chiuderebbe anche il pannello.
Javascript code:
$(document).ready(function() {
$('#switcher').click(function() {
$('#switcher .button').toggleClass('hidden');
});
});
Un modo per aggirare questo inconveniente è individuare il target dell'evento, cioè il generatore dello stesso:
$(document).ready(function() {
$('#switcher').click(function(event) {
if (event.target == this) {
$('#switcher .button').toggleClass('hidden');
}
});
});
E' un evento genrato in javascript, anche se la proprietà 'target' è implementata diversamente nei diversi browsers. JQuery rende questa proprietà crossbrowser. In questo modo quando premerò sul bottone, il pannello non collasserà perchè chi ha scatenato l'evento non è il pannello stesso.
Un altro metodo è stoppare la propagazione degli eventi:
$(document).ready(function() {
$('#switcher .button').click(function(event) {
$('body').removeClass();
if (this.id == 'switcher-narrow') {
$('body').addClass('narrow');
}
else if (this.id == 'switcher-large') {
$('body').addClass('large');
}
$('#switcher .button').removeClass('selected');
$(this).addClass('selected');
event.stopPropagation();
});
});
Il metodo stopPropagation(), è un altro metodo nativo di javascript, ma al solito con diversi risultati nei diversi browser. JQuery mette a disposizione lo stesso metodo nello scope dell'evento garantendo la compatibilità.
Se invece volessi far sì che il pannello fosse chiudibile solo quando sono in modalità normal? Dovrei fare in modo di annullare il gestore d'evento che controlla il click sul pannello quando seleziono i bottoni '#switcher-narrow, #switcher-large'.
Rimuovere un event handler
$(document).ready(function() {
var toggleStyleSwitcher = function() {
$('#switcher .button').toggleClass('hidden');
};
$('#switcher').click(toggleStyleSwitcher);
$('#switcher-normal').click(function() {
$('#switcher').click(toggleStyleSwitcher);
});
$('#switcher-narrow, #switcher-large').click(function() {
$('#switcher').unbind('click', toggleStyleSwitcher);
});
});
Una metodo utile è '.one()' che consente di rimuovere un gestore d'evento automaticamente dopo la prima volta che un evento appunto viene scatenato:
$(document).ready(function() {
$('#switcher').one('click', toggleStyleSwitcher);
});
Un'altra funzionalità interessante è fornita dal metodo '.trigger()' che consente di scatenare un evento anche nel caso che l'utente non l'abbia compiuto. Ciò potrebbe essere utile per esempio nel caso volessimo che il nostro pannello fosse già chiuso al caricamento della pagina.
Javascript code:
$(document).ready(function() {
$('#switcher').trigger();
});