La gestione degli eventi è un altro di quei grandi motivi per utilizzare jQuery. Ci sono alcune differenze tra browser su come fare, che jQuery normalizza in una semplice API, applicando alcune best practice.
C'è essenzialmente un metodo che devi conoscere: .on()- Funziona in questo modo:
$("button").on("click", function() ( // do something ));Qui stiamo dando al .on()metodo solo due parametri. Il nome dell'evento ("clic") e una funzione da eseguire quando l'evento si verifica su uno qualsiasi degli elementi di quella selezione. Legge abbastanza chiaramente, non è vero?
Le persone con una certa esperienza precedente jQuery potrebbero avere familiarità con altri metodi di rilegatura piace .bind(), .live()o .delegate(). Non preoccuparti più di quelli, il moderno jQuery li ha combinati tutti in .on()che fa sempre la migliore pratica.
Quando si associa un evento come abbiamo fatto sopra, è possibile (ed è generalmente intelligente) includere un nome di parametro nella funzione. Quel parametro sarà "l'oggetto evento" all'interno della funzione:
$("button").on("click", function(event) ( // event => "the event object" ));Attraverso quell'oggetto evento si ottengono molte informazioni. Lo conosci già un po 'perché lo abbiamo usato per .preventDefault()e .stopPropagation(). Ma ci sono anche molte altre informazioni dirette in quell'oggetto. Cose come il tipo di evento (nel caso in cui più eventi attivino la stessa funzione), quando è accaduto, dove è successo (coordinate, se applicabile), su quale elemento è successo e molto altro. Vale la pena ispezionare regolarmente l'oggetto evento durante la codifica.
Esiste un concetto di delega degli eventi che è estremamente importante quando si lavora con gli eventi. È una best practice moderna molto intelligente. Incorpora l'idea di scopo.
Un modo tradizionale di pensare all'associazione di eventi è come "trova tutti i pulsanti sulla pagina e associa ad essi un evento clic". Ovviamente funziona, ma è:
- Non molto efficiente
- Fragile
Non efficiente perché costringi immediatamente JavaScript a trovare tutti quegli elementi pulsante quando, con la delega, potresti trovare solo un elemento più facile da trovare.
Fragile perché se vengono aggiunti più pulsanti alla pagina, hanno già perso la barca sulla rilegatura e dovranno essere rilegati.
Con la delega degli eventi, legheresti quell'evento clic a un elemento che si trova più in alto nell'albero DOM rispetto ai pulsanti che li contengono tutti. Potrebbe essere da qualche parte, potrebbe essere lo documentstesso. Quando leghi l'evento clic a quell'elemento più in alto, gli dici che sei ancora interessato solo ai clic che si sono verificati sui pulsanti. Quindi, quando si fa clic su un pulsante, a causa della natura del bubbling dell'evento, quel clic alla fine si attiverà sull'elemento più in alto. Ma l'oggetto evento saprà se il clic originale è avvenuto o meno su un pulsante e la funzione che hai impostato per attivarsi su quell'evento si attiverà o non si attiverà conoscendo tali informazioni.
In questo screencast, dimostriamo che in questo modo:
$("#scope").on("click", "textarea", function(event) ( // Do stuff! console.log(event); ));Ora immaginate se abbiamo aggiunto un altro a quello . Non abbiamo bisogno di riassociare alcun evento, perché l'evento è ancora felicemente vincolato all'ambito e gli eventi continueranno a sgorgare dalla textarea appena aggiunta. Ciò è particolarmente utile negli ambienti di app Web in cui aggiungi regolarmente nuovi elementi alla pagina.
Un'altra cosa buona da sapere sull'associazione di eventi jQuery è che non si escludono a vicenda. Se aggiungi un altro gestore di clic allo stesso elemento che ne ha già uno, ne aggiungerà semplicemente un altro. Non stai sovrascrivendo il precedente. jQuery gestisce questo in modo abbastanza grazioso per te. Puoi sempre svincolarli se vuoi davvero sovrascrivere una funzione associata in precedenza.
Se è lo stesso evento esatto, vale la pena sapere che per svincolare uno specifico di essi e non l'altro, è necessario assegnare uno spazio ai nomi agli eventi. Ciò avviene utilizzando un punto nel nome dell'evento, come click.namespace.
$("#scope").on("click.one", "textarea", function(event) ( )); $("#scope").on("click.two", "textarea", function(event) ( )); // Just remove the first $("#scope").off("click.one", "textarea");.off(), come non l'abbiamo menzionato prima, è il modo in cui svincoli gli eventi.
Ci sono molti possibili eventi DOM. Il clic è il grande principale ovvio, ma ci sono doppio clic, mouseenter e mouseleave, keydown e keyup, formano quelli specifici come sfocatura e modifica e molto altro ancora. Se sei interessato all'elenco completo, puoi ottenerne uno come questo.
Puoi associare più eventi contemporaneamente in questo modo:
$("#scope").on("keydown keyup", "textarea", function(event) ( console.log(event.keyCode); ));Ci sono alcune circostanze in cui stai aspettando che accada un evento, ma una volta che accade, non ti interessa più o esplicitamente non vuoi più attivare la funzione che avevi associato. Ecco di cosa tratta la .one()funzione. Un caso d'uso standard per questo è un pulsante di invio del modulo (se stai gestendo con Ajax o altro). Probabilmente vorrai essenzialmente disabilitare quel pulsante di invio dopo che lo hanno premuto finché non sarai in grado di elaborare tali informazioni e fornire loro il feedback appropriato. Ovviamente non è l'unico caso d'uso, ma tienilo a mente. .one()== solo una volta.