Sommario
Dalla versione 1.7 di jQuery abbiamo il metodo on(), che ci offre tutte le funzionalità necessarie per gestire gli eventi. Grazie a questo metodo non abbiamo più bisogno del vecchio bind (), live () o delegate (), ma nemmeno abbiamo bisogno di sfocatura (), focus (), clic (), hover () e altri.
Proprio come c'è on(), abbiamo il suo opposto, off(), che rimuove gli eventi assegnati con on().
Vedremo una serie di esempi per capire meglio il metodo on().
Supponiamo di voler eseguire una funzione quando si fa clic su un pulsante:
(funzione () {$ ('pulsante'). clic (funzione () {// codice da eseguire});}) ();È come se lo facessimo tradizionalmente con il clic (). Ma se osserviamo il codice jQuery vedremo che ciò che sta effettivamente accadendo è che viene chiamato il metodo on(), quindi la cosa più veloce è fare:
(funzione () {$ ('pulsante'). on ('clic', funzione () {// codice da eseguire});}) ();Questa è la via più diretta. E lo stesso per altri metodi come change (), hover (), mouseenter (), ecc … (in realtà hover () ciò che fa è chiamare mouseenter () e mouseleave () che a loro volta chiamano il metodo on ()
Diamo un'occhiata a jQuery. Se scarichiamo la versione 1.7 o successiva e osserviamo il suo codice, vedremo quanto segue:
jQuery.each (("blur focus focusin focusout load ridimensiona scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouselascia cambiare select submit keydown keypress keyup error contextmenu"). split (""), f function (i, name) {// Gestire l'associazione degli eventi jQuery.fn [nome] = funzione (dati, fn) {if (fn == null) {fn = dati; dati = null;} return arguments.length -> 0? This.on (nome, null, data, fn): this.trigger (nome);};Da qui ci interessa solo vedere che i metodi “blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, cambia, seleziona, submit, keydown, keypress, keyup, error e contextmenu "alla fine tutto finisce in" this.on (name, null, data, fn) ".
bind(), live() e delegate()
In passato si faceva anche:
(funzione () {$ ('pulsante'). bind ('clic', funzione () {// codice da eseguire quando si fa clic sul pulsante});}) ();O se volessimo che l'evento funzionasse anche dopo aver aggiunto nuovi elementi "pulsante" al documento, useremmo il metodo live():
(funzione () {$ ('pulsante'). live ('clic', funzione () {// codice da eseguire quando si fa clic sul pulsante});}) ();Successivamente, jQuery ha introdotto "delegate()", che ci ha permesso di assegnare un evento a un contesto. Ad esempio, se il pulsante è (o sarà, se aggiunto in seguito) all'interno di un div con la classe "contenitore":
(function() {$ ('div.container') delegate ('button', 'click', function() {// codice da eseguire quando si fa clic sul pulsante});}) ();Ma come con i precedenti, entrambi bind(), live() o delegate() non fanno altro che chiamare il metodo on().Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo
