Share
Paginile web, în cea mai mare parte, sunt conduse de eveniment. Bibliotecile cum ar fi jQuery au oferit metode de ajutor pentru a face această funcționalitate mult mai ușor de înțeles. În acest tutorial, vom examina extinderea acestor metode pentru a crea propriile dvs. evenimente personalizate.
Înainte de luxul bibliotecilor JavaScript, dacă doriți să adăugați un eveniment simplu de clic la un element pe care trebuie să îl faceți pentru a sprijini toate browserele:
Accentsconagua
var elt = document.getElementById ("# myBtn"); dacă (elt.addEventListener) elt.addEventListener ("faceți clic pe", funcția () alert ('clicked');); altfel dacă (elt.attachEvent) elt.attachEvent ("onclick", funcția () alert ('butonul apăsat');); altceva elt.onclick = function () alert ('apasat butonul'); ; Acum, bibliotecile JavaScript vin cu metode de ajutor pentru a face managementul evenimentului mai digerabil. De exemplu, efectuarea celor de mai sus în jQuery este mult mai condensată.
$ ("# myBtn") faceți clic pe (funcția () alert ('butonul apăsat');); Indiferent de implementarea dvs., există trei părți principale ale evenimentelor:
În evenimentul nostru de clic de la începutul tutorialului, ascultătorul este evenimentul clic care așteaptă să se facă clic pe elementul #myBtn. Când se face clic pe elementul #myBtn, acesta expediază și va declanșa operatorul; care în acest caz este o funcție anonimă pentru afișarea mesajului de alertă ().
jQuery ne permite să facem un pas mai departe și să creăm propriile noastre evenimente personalizate. În acest tutorial, vom folosi o listă neordonată a unei liste de directoare și vom adăuga funcționalități prin evenimente personalizate care vor restrânge și extinde directoarele. Să începem cu structura de pagină de bază care va fi utilizată în exemplele viitoare.
jQuery Custom Events
Aici creăm o listă simplă de directoare utilizând o listă neordonată. Am inclus jQuery de pe Google JSAPI CDN și numit addIcons (), care adaugă imagini ale fiecărui fișier și folder în funcție de extensia de fișier listată. Această funcție este exclusiv în scopuri estetice. Nu este necesar pentru niciunul din codul evenimentului personalizat pe care urmează să-l implementăm. Rezultatul acestui pas și poate fi văzut aici.
Înainte de a începe să adăugăm evenimente în exemplul de listare a directorului, trebuie să înțelegem cum funcționează .bind () și .trigger (). Folosim bind () pentru a atașa un eveniment la toate elementele potrivite care locuiesc în prezent pe pagină. Apoi, utilizați .trigger () când doriți să expediați evenimentul. Să aruncăm o privire la un exemplu rapid.
$ ("# myBtn") bind ("faceți clic pe", funcția (evt) alert ('butonul apăsat');); $ ( "# MyBtn") de declanșare ( "clic").; În codul de mai sus, când se face clic pe elementul cu un id de "myBtn", va apărea un mesaj de alertă. În plus, declanșatorul () va declanșa evenimentul de clic imediat la încărcarea paginii. Rețineți că bind () este modul în care atașați un eveniment. În timp ce .trigger (), forțați evenimentul să fie expediat și să execute comanda pentru eveniment.
Metoda .bind () nu se limitează doar la evenimentele browserului, ci poate fi utilizată pentru implementarea propriilor evenimente personalizate. Să începem prin crearea unor evenimente personalizate numite colaps și extinde pentru exemplul nostru de înregistrare în director.
În primul rând, să le legăm colaps eveniment la toate directoarele reprezentate în lista noastră neordonată.
$ ("# tree li: parent") bind ("restrângere", funcție (evt) Aici găsim toate elementele care sunt părinți și trecem numele evenimentului colaps în metoda .bind (). Am numit și primul parametru EVT, care reprezintă obiectul jQuery Event.
.. $ (Evt.target) .children () slideUp () de capăt () addClass ( "prăbușit").;
Acum, selectăm ținta evenimentului și îi alunecăm pe toți copiii săi. În plus, am avut o clasă CSS prăbușit la elementul nostru de director.
), bind ("expand", funcția (evt) Suntem lanțuri de evenimente și atașăm pe noi extinde eveniment la această linie.
$ (evt.target) .children () slideDown () de capăt () removeClass ( "prăbușit")...; );
Doar opusul nostru colaps manipulator de evenimente, în extinde manipulator de evenimente glisăm în jos toate elementele de copii ale elementelor de director și eliminăm clasa prăbușit din elementul țintă. Punând totul împreună.
$ (arborele li: părinte) bind ("colaps", funcția (evt) $ (evt.target) .children (). .bind ("extinde", funcția (evt) $ (evt.target) .children () slideClass ("colapsed"); Doar acest cod nu va face nimic pentru noi, deoarece evenimentele colaps și extinde sunt necunoscute și nu au nici o idee când să fie expediate. Așa că adăugăm metoda noastră .trigger () când vrem să declanșăm aceste evenimente.
$ (arborele li: părinte) bind ("colaps", funcția (evt) $ (evt.target) .children (). .bind ("extinde", functie (evt) $ (evt.target) .children () slideDown (). comutați între $ (this) .trigger ("collapse");, funcția () $ (this) .trigger ("expand");); Dacă executăm acest cod, directoarele noastre se vor comuta atunci când se face clic între firul colaps și extinde eveniment. Dar, dacă faceți clic pe un director imbricat, veți observa că evenimentele noastre de fapt se trag de mai multe ori pe un clic. Acest lucru se datorează faptului că a avut loc o bombardare a evenimentelor.
Când faceți clic pe un element dintr-o pagină, evenimentul călătorește sau este capturat de la cel mai mare părinte care are un eveniment atașat acestuia la destinația vizată. Apoi, bulează de la ținta intenționată până la cel mai înalt părinte.
De exemplu, când dăm clic pe css / folder, evenimentul nostru este capturat prin root /, assets /, și apoi css /. Apoi bulează css /, active /, apoi la root /. Prin urmare, handler-ul se execută de trei ori. Putem corecta acest lucru adăugând o condiție simplă în dispozitivul de manipulare pentru ținta dorită.
dacă (evt.target == evt.currentTarget) (evt.target) .children () slideUp () .cât () a adăugatClass ("colapsed"); Acest cod va verifica fiecare țintă curentă a evenimentului față de destinația vizată sau targetTarget. Când avem un meci, numai atunci scriptul va executa evenimentul de restrângere. După actualizarea ambelor colaps și extinde evenimentul va funcționa conform așteptărilor.
Un spațiu de nume oferă context pentru evenimente. Evenimente personalizate, colaps și extinde, sunt ambigue. Adăugarea unui spațiu de nume la un eveniment personalizat jQuery este structurată numele evenimentului urmată de Spațiu de nume. Vom face spațiul nostru de nume numit TreeEvent, deoarece evenimentele noastre reprezintă acțiunile și funcționalitatea unei structuri de directoare de copaci. Odată ce am adăugat spațiile de nume la evenimentele noastre, codul va arăta acum astfel:
$ (arborele li: părinte) bind ("collapse.TreeEvent", funcția (evt) if (evt.target == evt.currentTarget) $ (evt.target) .children . () () () () () () () () () ) () () () () () () () () () () () () ) .trigger ("expand.TreeEvent");); Tot ce aveam nevoie să schimbăm erau numele evenimentului în metodele .bind () și .trigger () pentru ambele colaps și extinde evenimente. Acum avem un exemplu funcțional utilizând evenimente personalizate cu nume de evenimente.
Rețineți că putem șterge cu ușurință evenimentele din elemente utilizând metoda unbind ().
$ ("# arbore copac: părinte") .debind ("collapse.TreeEvent"); // eliminați doar evenimentul de restrângere $ ("# tree li: parent"); deconectați (". TreeEvent"); // eliminați toate evenimentele din spațiul de nume TreeEvent O altă modalitate de a configura un eveniment personalizat în jQuery este să valorificați API Events Special. Nu există prea multe documente despre acest API, dar Brandom Aaron, un colaborator principal al jQuery, a scris două postări excelente pe blog (http://brandonaaron.net/blog/2009/03/26/special-events and http: / /brandonaaron.net/blog/2009/06/4/jquery-edge-new-special-event-hooks) pentru a ne ajuta să înțelegem metodele disponibile. Mai jos este o scurtă explicație a metodelor.
Acum, să ne uităm la modul în care putem combina evenimentele noastre personalizate într-un eveniment special pe care îl vom apela toggleCollapse.
jQuery.event.special.toggleCollapse = setup: functie (date, namespaces) pentru (var i in spatii de nume) if (namespaces [i] == "TreeEvent") jQuery (this) jQuery.event.special.toggleCollapse.TreeEvent.handler); , teardown: funcția (namespaces) pentru (var i în spațiile de nume) if (namespaces [i] == "TreeEvent") jQuery (this) .unbind ('click', jQuery.event.special.toggleCollapse .TreeEvent.handler); , TreeEvent: handler: funcție (eveniment) if (event.target == event.currentTarget) var elt = jQuery (aceasta); var cssClass = "colapsed"; dacă (elt.hasClass (cssClass)) elt.children (). altfel elt.children () slideUp () .cât () .classClass (cssClass); event.type = "toggleCollapse"; jQuery.event.handle.apply (acest lucru, argumente); ; $ ("# tree li: părinte") bind ("toggleCollapse.TreeEvent", funcția (evt) ); Să aruncăm o privire la această secțiune după secțiune.
jQuery.event.special.toggleCollapse = setup: functie (date, namespaces) pentru (var i in spatii de nume) if (namespaces [i] == "TreeEvent") jQuery (this) jQuery.event.special.toggleCollapse.TreeEvent.handler); ,
Prima linie jQuery.event.special.toggleCollapse creează un nou eveniment special numit toggleCollapse. Apoi avem metoda noastră de configurare, care se repetă peste toate denumirile acestui eveniment. Odată ce află TreeEvent, acesta leagă un eveniment clic pe elementele potrivite, care vor apela jQuery.event.special.toggleCollapse.TreeEvent.handler odată ce evenimentul este declanșat. Rețineți că folosim un eveniment de clic, spre deosebire de funcția de comutare (), pe care am folosit urechea. Acest lucru se datorează faptului că comuta () nu este un eveniment, ci o funcție de ajutor pentru interacțiune.
teardown: funcția (namespaces) pentru (var i în spațiile de nume) if (namespaces [i] == "TreeEvent") jQuery (this) .unbind ('click', jQuery.event.special.toggleCollapse.TreeEvent.handler ); , Metoda noastră teardown este similară metodei noastre de configurare, dar în schimb vom dezbate evenimentul clic de la toate elementele potrivite.
TreeEvent: handler: funcție (eveniment) if (event.target == event.currentTarget) var elt = jQuery (aceasta); var cssClass = "colapsed"; dacă (elt.hasClass (cssClass)) elt.children (). altfel elt.children () slideUp () .cât () .classClass (cssClass); event.type = "toggleCollapse"; jQuery.event.handle.apply (acest lucru, argumente); ;
Aici folosim spațiul de nume TreeEvent pentru a rezuma manipulatorul. În handler, vom comuta între o colaps și o stare extinsă, în funcție de cazul în care elementul corespunzător conține clasa CSS "colapsed". În cele din urmă, am setat tipul de eveniment la numele evenimentului nostru, toggleCollapse și folosiți metoda apply () care va executa argumentul de apel invers când legăm acest eveniment special.
$ ("# tree li: părinte") bind ("toggleCollapse.TreeEvent", funcția (evt) ); În cele din urmă, legăm evenimentul nostru special la directoarele listei de directoare. Rezultatul nostru final poate fi văzut aici.
Mai jos sunt câteva resurse suplimentare care ar putea fi utile atunci când lucrați cu evenimente personalizate. Vă mulțumim pentru lectură!
