La gestione degli eventi del DOM con jQuery
La gestione degli eventi con jQuery è uno degli aspetti più complessi per chi non conosce i meccanismi di creazione, propagazione e cattura degli eventi. Approfondire l'argomento può essere utile sia se lavoriamo già con jQuery, ma non abbiamo preso confidenza con i cosiddetti event handler, sia se stiamo muovendo i primi passi nel mondo jQuery. Per questo motivo tratteremo l'argomento senza dare per scontate conoscenze avanzate di jQuery, cercando di introdurre brevemente i concetti propedeutici necessari.
Iniziamo con lo spiegare cosa si intende per evento. Un evento è una notifica, messaggio o avviso creato dal browser in risposta a qualche cambiamento nel DOM. In molti casi gli eventi sono creati in seguito ad azioni dell'utente: ogni volta che ridimensioniamo la finestra del browser, clicchiamo su un pulsante o semplicemente muoviamo il mouse, generiamo degli eventi. Quando l'evento viene creato, si dice che viene lanciato o sparato (in inglese fired). La creazione dell'evento è perciò un fatto automatico, gestito dal browser in modo trasparente, ma nulla vieta di creare nuovi eventi, che descrivano ad esempio cambiamenti non previsti tra gli eventi standard, oppure da lanciare manualmente (per mezzo di istruzioni JavaScript o jQuery). Una volta lanciato, un evento si propaga attraverso tutti gli ascoltatori (o listener), che rappresentano i possibili destinatari dell'evento. Anche la propagazione dell'evento può essere gestita in modo personalizzato, ad esempio interrompendo la propagazione in anticipo. Si tratta però di un argomento che eviteremo di trattare oggi.
Riassumendo, la nascita e la diffusione di un evento sono descritti in termini di creazione e propagazione. L'ultima parola che dobbiamo introdurre è la cattura o gestione dell'evento (in inglese catching). Quando un evento viene catturato in alcuni casi non viene più propagato, perché si assume che il codice ricevente (quello che ha catturato l'evento) lo abbia gestito completamente.
Se la terminologia sembra complessa o astratta, un esempio concreto dovrebbe chiarire le idee. La catena di creazione, propagazione e cattura di un evento è in realtà un meccanismo molto comune nell'ambito della programmazione jQuery. Tutti dovrebbero conoscere il codice che racchiude la maggior parte degli script
$(document).ready( function() {
// Il mio codice
} ) ;
ebbene, il codice qui sopra rappresenta la gestione di un evento, in questo caso l'evento “pagina caricata”. Quando l'intera pagina HTML viene caricata dal browser, ovvero il browser termina il processo di analisi del linguaggio markup creando il DOM corrispondente, viene lanciato l'evento “document ready”. Tale evento si propaga attraverso il codice JavaScript, jQuery o altro. Nell'esempio qui sopra l'istruzione $(document).ready si occupa proprio di catturare l'evento. Una funzione di questo tipo è chiamata event handler.
Abbiamo introdotto i concetti fondamentali che entrano in gioco nella gestione degli eventi. Nelle prossime pagine vedremo alcuni esempi concreti di utilizzo degli event handler di jQuery. In altre parole, vedremo quali sono le funzioni o API di jQuery che permettono di catturare gli eventi più interessanti e comuni.
