Share
Le pagine Web, per la maggior parte, sono gestite da eventi. Librerie come jQuery hanno fornito metodi di supporto per rendere questa funzionalità molto più semplice da cogliere. In questo tutorial, esamineremo l'espansione di questi metodi per creare i tuoi eventi personalizzati personalizzati.
Prima del lusso delle librerie JavaScript, se si desidera aggiungere un semplice evento click a un elemento necessario per seguire tutti i browser:
Accentsconagua
var elt = document.getElementById ("# myBtn"); if (elt.addEventListener) elt.addEventListener ("click", function () alert ('button clickked');); else if (elt.attachEvent) elt.attachEvent ("onclick", function () alert ('button clickked');); else elt.onclick = function () alert ('pulsante cliccato'); ; Ora le librerie JavaScript sono fornite con metodi di supporto per rendere la gestione degli eventi più digeribile. Ad esempio, fare quanto sopra in jQuery è molto più condensato.
$ ("# myBtn"). click (function () alert ('button clickked');); Indipendentemente dalla tua implementazione, ci sono tre parti principali degli eventi:
Nel nostro evento click all'inizio del tutorial, il listener è l'evento click in attesa dell'elemento #myBtn su cui fare clic. Quando si fa clic sull'elemento #myBtn, esso invia e attiva il gestore; che in questo caso è una funzione anonima per visualizzare il messaggio alert ().
jQuery ci consente di fare un ulteriore passo avanti e creare i nostri eventi personalizzati. In questo tutorial, utilizzeremo un elenco non ordinato di un elenco di directory e aggiungiamo funzionalità tramite eventi personalizzati che comprimono e espandono le directory. Iniziamo con la nostra struttura di base della pagina che verrà utilizzata nei prossimi esempi.
Eventi personalizzati jQuery
Qui stiamo creando una semplice lista di directory usando una lista non ordinata. Abbiamo incluso jQuery dal CDN JSAPI di Google e chiamato addIcons (), che aggiunge immagini di ogni file e cartella in base all'estensione del file elencata. Questa funzione è puramente a fini estetici. Non è necessario per nessuno dei codici evento personalizzati che stiamo per implementare. Il risultato di questo passaggio e può essere visualizzato qui.
Prima di iniziare ad aggiungere eventi al nostro esempio di elenco di directory, abbiamo bisogno di capire come funzionano .bind () e .trigger (). Usiamo bind () per allegare un evento a tutti gli elementi abbinati che attualmente risiedono nella pagina. Quindi utilizzare .trigger () quando si desidera inviare l'evento. Diamo un'occhiata ad un rapido esempio.
$ ("# myBtn"). bind ("click", function (evt) alert ('pulsante cliccato');); $ ( "# MyBtn") grilletto ( "click").; Nel codice sopra, quando si fa clic sull'elemento con un ID di 'myBtn', viene visualizzato un messaggio di avviso. Inoltre, il nostro trigger () attiverà l'evento click immediatamente al caricamento della pagina. Tieni presente che bind () è il modo in cui alleghi un evento. Mentre .trigger (), si sta forzando l'invio dell'evento e si esegue il gestore dell'evento.
Il metodo .bind () non è solo limitato agli eventi del browser, ma può essere utilizzato per implementare i propri eventi personalizzati. Iniziamo creando eventi personalizzati denominati crollo e espandere per il nostro esempio di elenco di directory.
Innanzitutto, leghiamo a crollo evento per tutte le directory rappresentate nella nostra lista non ordinata.
$ ("# tree li: parent"). bind ("collapse", function (evt) Qui troviamo tutti gli elementi che sono i genitori e passano il nome dell'evento crollo nel metodo .bind (). Abbiamo anche nominato il primo parametro EVT, che rappresenta l'oggetto evento jQuery.
.. $ (Evt.target) .children () slideUp () end () addClass ( "crollato.");
Ora selezioniamo il target dell'evento e facciamo scorrere tutti i suoi figli. Inoltre, avevamo una classe CSS collassata al nostro elemento di directory.
). bind ("expand", function (evt) Stiamo incatenando eventi e attaccando i nostri espandere evento a questa linea.
$ (evt.target) .children () slideDown () end () removeClass ( "crollato")...; );
Proprio l'opposto del nostro crollo gestore di eventi, nel espandere gestore di eventi facciamo scorrere verso il basso tutti gli elementi figli degli elementi della directory e rimuovere la classe collassata dal nostro elemento obiettivo. Mettere tutto insieme.
$ ("# tree li: parent"). bind ("collapse", function (evt) $ (evt.target) .children (). slideUp (). end (). addClass ("collapsed");) .bind ("expand", function (evt) $ (evt.target) .children (). slideDown (). end (). removeClass ("collapsed");); Solo questo codice da solo non farà nulla per noi perché gli eventi crollo e espandere sono sconosciuti e non hanno idea di quando essere spediti. Quindi aggiungiamo il nostro metodo .trigger () quando vogliamo che questi eventi si attivino.
$ ("# tree li: parent"). bind ("collapse", function (evt) $ (evt.target) .children (). slideUp (). end (). addClass ("collapsed");) .bind ("expand", function (evt) $ (evt.target) .children (). slideDown (). end (). removeClass ("collapsed");)). toggle (function () // passa da $ (this) .trigger ("collapse");, function () $ (this) .trigger ("expand");); Se eseguiamo questo codice, le nostre directory ora si alterneranno quando si fa clic tra l'attivazione di crollo e espandere evento. Ma, se fai clic su una directory annidata, noterai che i nostri eventi stanno sparando più volte per ogni clic. Questo a causa dell'evento che bolle.
Quando si fa clic su un elemento su una pagina, l'evento si sposta o viene catturato dal genitore più in alto che ha un evento collegato alla destinazione desiderata. Quindi bolle dall'obiettivo con intento, che esegue il backup del genitore più in alto.
Ad esempio, quando facciamo clic su css / cartella, il nostro evento viene catturato tramite root /, assets /, e quindi css /. Quindi bolle css /, assets /, quindi per root /. Pertanto, il gestore viene eseguito per tre volte. Possiamo correggere questo aggiungendo un semplice condizionale nel gestore per il target desiderato.
if (evt.target == evt.currentTarget) (evt.target) .children (). slideUp (). end (). addClass ("collapsed"); Questo codice controllerà ogni target corrente dell'evento rispetto al target previsto o currentTarget. Quando abbiamo una corrispondenza, solo allora lo script eseguirà l'evento di compressione. Dopo aver aggiornato entrambi i crollo e espandere evento la nostra pagina funzionerà come previsto.
Uno spazio dei nomi fornisce il contesto per gli eventi. Gli eventi personalizzati, crollo e espandere, sono ambigui. L'aggiunta di uno spazio dei nomi a un evento personalizzato jQuery è strutturata nome dell'evento seguito dal namespace. Creeremo il nostro spazio dei nomi chiamato TreeEvent, perché i nostri eventi rappresentano le azioni e le funzionalità di una struttura di cartelle ad albero. Una volta aggiunti gli spazi dei nomi ai nostri eventi, il codice sarà simile al seguente:
$ ("# tree li: parent"). bind ("collapse.TreeEvent", function (evt) if (evt.target == evt.currentTarget) $ (evt.target) .children (). slideUp () .end (). addClass ("collapsed");). bind ("expand.TreeEvent", function (evt) if (evt.target == evt.currentTarget) $ (evt.target) .children ( ) .slideDown (). end (). removeClass ("collapsed");). toggle (function () $ (this) .trigger ("collapse.TreeEvent");, function () $ (questo ) .trigger ("expand.TreeEvent");); Tutto quello di cui avevamo bisogno di cambiare erano i nomi degli eventi nei metodi .bind () e .trigger () per entrambi crollo e espandere eventi. Ora abbiamo un esempio funzionale che utilizza eventi personalizzati con nomi assegnati.
Nota, possiamo rimuovere facilmente gli eventi dagli elementi usando il metodo unbind ().
$ ("# tree li: parent"). unbind ("collapse.TreeEvent"); // rimuovi solo l'evento di compressione $ ("# tree li: parent"). unbind (". TreeEvent"); // rimuove tutti gli eventi sotto lo spazio dei nomi TreeEvent Un altro modo per impostare un evento personalizzato in jQuery è sfruttare l'API degli eventi speciali. Non c'è molta documentazione su questa API, ma Brandom Aaron, un contributore principale di jQuery, ha scritto due post di blog eccellenti (http://brandonaaron.net/blog/2009/03/26/special-events e http: / /brandonaaron.net/blog/2009/06/4/jquery-edge-new-special-event-hooks) per aiutarci a capire i metodi disponibili. Di seguito una breve spiegazione dei metodi.
Ora, diamo un'occhiata a come possiamo combinare i nostri eventi personalizzati in un evento speciale che chiameremo toggleCollapse.
jQuery.event.special.toggleCollapse = setup: function (data, namespaces) for (var i in namespace) if (namespace [i] == "TreeEvent") jQuery (this) .bind ('clic', jQuery.event.special.toggleCollapse.TreeEvent.handler); , teardown: function (namespaces) for (var i in namespace) if (namespace [i] == "TreeEvent") jQuery (this) .unbind ('click', jQuery.event.special.toggleCollapse .TreeEvent.handler); , TreeEvent: handler: function (event) if (event.target == event.currentTarget) var elt = jQuery (this); var cssClass = "collapsed"; if (elt.hasClass (cssClass)) elt.children (). slideDown (). end (). removeClass (cssClass); else elt.children (). slideUp (). end (). addClass (cssClass); event.type = "toggleCollapse"; jQuery.event.handle.apply (this, arguments); ; $ ("# tree li: parent"). bind ("toggleCollapse.TreeEvent", function (evt) ); Diamo un'occhiata a sezione per sezione.
jQuery.event.special.toggleCollapse = setup: function (data, namespaces) for (var i in namespace) if (namespace [i] == "TreeEvent") jQuery (this) .bind ('clic', jQuery.event.special.toggleCollapse.TreeEvent.handler); , La prima linea jQuery.event.special.toggleCollapse crea un nuovo evento speciale chiamato toggleCollapse. Abbiamo quindi il nostro metodo di installazione, che itera su tutti gli spazi dei nomi di questo evento. Una volta trovato TreeEvent, lega un evento click agli elementi abbinati, che chiameranno jQuery.event.special.toggleCollapse.TreeEvent.handler una volta che l'evento è stato licenziato. Nota, stiamo usando un evento click al contrario della funzione toggle () che stavamo usando. Questo perché toggle () non è un evento, ma una funzione di aiuto per l'interazione.
teardown: function (namespaces) for (var i in namespace) if (namespace [i] == "TreeEvent") jQuery (this) .unbind ('click', jQuery.event.special.toggleCollapse.TreeEvent.handler ); , Il nostro metodo di rimozione è simile al nostro metodo di configurazione, ma non assegneremo l'evento click da tutti gli elementi corrispondenti.
TreeEvent: handler: function (event) if (event.target == event.currentTarget) var elt = jQuery (this); var cssClass = "collapsed"; if (elt.hasClass (cssClass)) elt.children (). slideDown (). end (). removeClass (cssClass); else elt.children (). slideUp (). end (). addClass (cssClass); event.type = "toggleCollapse"; jQuery.event.handle.apply (this, arguments); ;
Qui stiamo usando lo spazio dei nomi TreeEvent per astrarre il gestore. Nel gestore, passiamo da un collasso a uno stato espanso a seconda che l'elemento con corrispondenza contenga la classe CSS "compresso". Infine, impostiamo il tipo di evento sul nostro nome del nostro evento, toggleCollapse e usa il metodo apply () che eseguirà l'argomento callback quando associamo questo evento speciale.
$ ("# tree li: parent"). bind ("toggleCollapse.TreeEvent", function (evt) ); Infine, leghiamo il nostro evento speciale alle directory del nostro elenco di directory. Il nostro risultato finale può essere visto qui.
Di seguito sono riportate alcune risorse aggiuntive che potresti trovare utili quando si lavora con eventi personalizzati. Grazie per aver letto!
