Share
Websider, for det meste, er hendelsesdrevne. Biblioteker som jQuery har gitt hjelpemetoder for å gjøre denne funksjonaliteten mye lettere å forstå. I denne opplæringen vil vi se på å utvide disse metodene for å lage dine egne tilpassede navngitte hendelser.
Før luksusen til JavaScript-biblioteker, hvis du ønsket å legge til en enkel klikkhendelse til et element du trengte å gjøre følg for å støtte alle nettlesere:
Accentsconagua
var elt = document.getElementById ("# myBtn"); hvis (elt.addEventListener) elt.addEventListener ("klikk", funksjon () alert ('klikk klikket');); ellers hvis (elt.attachEvent) elt.attachEvent ("onclick", funksjon () alert ('klikk klikket');); else elt.onclick = function () alert ('knappen klikket'); ; Nå kommer JavaScript-biblioteker med hjelpemetoder for å gjøre arrangementshåndtering mer fordøyelig. For eksempel gjør det ovenfor i jQuery mye mer kondensert.
$ ("# myBtn"). klikk (funksjon () alert ('klikk klikket');); Uavhengig av implementeringen din, er det tre hoveddeler til hendelser:
I vår klikkhendelse i begynnelsen av opplæringen er lytteren klikkhendelse som venter på #myBtn-elementet som skal klikkes. Når #myBtn-elementet klikkes, sendes det og brenner handleren; som i dette tilfellet er en anonym funksjon for å vise varselmeldingen ().
jQuery tillater oss å gå et skritt videre og lage våre egne tilpassede arrangementer. I denne opplæringen bruker vi en uordnet liste over en katalogoppføring og legger til funksjonalitet via egendefinerte hendelser som vil kollapse og utvide kataloger. La oss starte med vår grunnleggende sidestruktur som skal brukes i de kommende eksemplene.
jQuery egendefinerte hendelser
Her oppretter vi en enkel katalogoppføring ved hjelp av en uordnet liste. Vi har tatt med jQuery fra Google JSAPI CDN og kalt addIcons (), som legger til bilder av hver fil og mappe, avhengig av filtypen som er oppført. Denne funksjonen er rent for estetiske formål. Det er ikke nødvendig for noen av de tilpassede hendelseskoden vi skal implementere. Resultatet av dette trinnet og kan ses her.
Før vi begynner å legge til hendelser i vårt katalogoppføringseksempel, må vi ha en forståelse av hvordan .bind () og .trigger () fungerer. Vi bruker bind () for å legge ved en begivenhet til alle sammenpassede elementer som for øyeblikket ligger på siden. Deretter bruker du .trigger () når du vil sende hendelsen. La oss ta en titt på et raskt eksempel.
$ ("# myBtn"). bind ("klikk", funksjon (evt) alert ('klikk klikket');); $ ( "# MyBtn") trigger ( "klikk").; I koden ovenfor, når elementet med et ID for 'myBtn' klikkes, vises en varselmelding. I tillegg vil vår utløser () faktisk brann klikkhendelsen umiddelbart når siden laster. Bare vær oppmerksom på at bind () er hvordan du knytter en hendelse. Mens .trigger (), tvinger du hendelsen til å bli sendt og utfører hendelseshåndtereren.
Metoden .bind () er ikke bare begrenset til nettleserhendelser, men kan brukes til å implementere dine egne tilpassede arrangementer. La oss begynne med å opprette egendefinerte hendelser som heter kollapse og utvide for vårt katalogoppføringseksempel.
Først, la oss binde a kollapse arrangement til alle kataloger som er representert i vår uordnede liste.
$ ("# tree li: parent"). bind ("kollaps", funksjon (evt) Her finner vi alle elementer som er foreldre og sender hendelsesnavnet kollapse inn i .bind () metoden. Vi har også kalt den første parameteren evt, som representerer jQuery Event-objektet.
.. $ (Evt.target) .children () slideUp siden () () addClass ( "kollapset").;
Nå velger vi målet for arrangementet og glir opp alle sine barn. I tillegg hadde vi en CSS-klasse kollapset til vårt katalogelement.
). bind ("utvide", funksjon (evt) Vi knytter sammen hendelser og knytter oss til utvide arrangement på denne linjen.
$ (evt.target) .children () slideDown siden () () removeClass ( "kollapset")...; );
Bare motsatt av vår kollapse hendelseshåndterer, i utvide Event Handler vi skyver ned alle barnelementene i katalogelementene og fjerner klassen kollapset fra vårt målelement. Sette alt sammen.
$ ("# tree li: parent"). bind ("kollaps", funksjon (evt) $ (evt.target) .children (). slideUp (). end (). addClass ("kollapset");) .bind ("expand", funksjon (evt) $ (evt.target) .children (). slideDown (). end (). removeClass ("collapsed");); Bare denne koden alene vil ikke gjøre noe for oss fordi hendelsene kollapse og utvide er ukjente og aner ikke når de skal sendes. Så legger vi til .trigger () -metoden når vi vil at disse hendelsene skal brenne.
$ ("# tree li: parent"). bind ("kollaps", funksjon (evt) $ (evt.target) .children (). slideUp (). end (). addClass ("kollapset");) .bind ("expand", funksjon (evt) $ (evt.target) .children (). slideDown (). end (). removeClass ("collapsed");)) bytt mellom $ (dette) .trigger ("kollaps");, funksjon () $ (dette) .trigger ("expand");); Hvis vi kjører denne koden, vil våre kataloger nå bytte når du klikker mellom å skyte kollapse og utvide begivenhet. Men hvis du klikker på en nestet katalog, vil du legge merke til at hendelsene faktisk brenner flere ganger per klikk. Dette er på grunn av hendelse boblende.
Når du klikker et element på en side, reiser arrangementet, eller blir tatt, fra den øverste forelder som har en hendelse knyttet til den til det tiltenkte målet. Det bobler deretter fra det hensiktsmessige målet tilbake til den øverste foreldre.
For eksempel, når vi klikker på css / mappen, blir vår hendelse fanget gjennom root /, assets /, og deretter css /. Det bobler deretter css /, assets /, deretter til root /. Derfor blir håndteringen utført tre ganger. Vi kan rette opp dette ved å legge til en enkel betinget i handleren for det tiltenkte målet.
hvis (evt.target == evt.currentTarget) (evt.target) .children (). slideUp (). end (). addClass ("kollapset"); Denne koden vil kontrollere hvert nåværende mål for hendelsen mot det tiltenkte målet, eller currentTarget. Når vi har en kamp, vil da bare skriptet utføre sammenbruddshendelsen. Etter oppdatering av begge kollapse og utvide hendelsen vår side vil fungere som forventet.
Et navneområde gir sammenheng for hendelser. De tilpassede hendelsene, kollapse og utvide, er tvetydige. Legge til et navneområde til en jQuery-tilpasset hendelse er strukturert arrangementsnavn etterfulgt av namespace. Vi lager vår navneområde som kalles TreeEvent, fordi våre hendelser representerer handlinger og funksjonalitet i en tremappestruktur. Når vi har lagt til navneområdene til hendelsene våre, vil koden nå se slik ut:
$ ("# tree li: parent"). bind ("collapse.TreeEvent", funksjon (evt) if (evt.target == evt.currentTarget) $ (evt.target) .children (). slideUp .end (). addClass ("collapsed");). bind ("expand.TreeEvent", funksjon (evt) if (evt.target == evt.currentTarget) $ (evt.target) .children ) .slideDown (). end (). removeClass ("kollapset");) bytt (funksjon () $ (dette) .trigger ("collapse.TreeEvent");, funksjon () $ ) .trigger ("expand.TreeEvent");); Alt vi trengte å endre var hendelsesnavnene i .bind () og .trigger () -metoder for begge kollapse og utvide arrangementer. Vi har nå et funksjonelt eksempel ved bruk av egendefinerte namespaced hendelser.
Merk, vi kan enkelt fjerne hendelser fra elementer ved hjelp av metoden unbind ().
$ ("# tree li: parent"). unbind ("collapse.TreeEvent"); // bare fjern kollapsbegivenheten $ ("# tree li: parent"). unbind ("TreeEvent"); // fjerne alle hendelser under TreeEvent-navneområdet En annen måte å sette opp en tilpasset hendelse i jQuery er å utnytte API-en for spesielle hendelser. Det er ikke mye dokumentasjon på denne API-en, men Brandom Aaron, en kjernebidragsyter av jQuery, har skrevet to gode blogginnlegg (http://brandonaaron.net/blog/2009/03/26/special-events og http: / /brandonaaron.net/blog/2009/06/4/jquery-edge-new-special-event-hooks) for å hjelpe oss å forstå metodene som er tilgjengelige. Nedenfor er en kort forklaring av metodene.
Nå, la oss se på hvordan vi kan kombinere våre tilpassede arrangementer til en spesiell begivenhet som vi vil ringe toggleCollapse.
jQuery.event.special.toggleCollapse = oppsett: funksjon (data, navneområder) for (var jeg i navneområder) if (namespaces [i] == "TreeEvent") jQuery (dette) .bind jQuery.event.special.toggleCollapse.TreeEvent.handler); , teardown: funksjon (namespaces) for (var jeg i navneområder) if (namespaces [i] == "TreeEvent") jQuery (dette) .unbind ('klikk', jQuery.event.special.toggleCollapse .TreeEvent.handler); , TreeEvent: handler: function (event) if (event.target == event.currentTarget) var elt = jQuery (dette); var cssClass = "kollapset"; hvis (elt.hasClass (cssClass)) elt.children (). slideDown (). end (). removeClass (cssClass); ellers elt.children (). slideUp (). end (). addClass (cssClass); event.type = "toggleCollapse"; jQuery.event.handle.apply (dette, argumenter); ; $ ("# tree li: parent"). bind ("toggleCollapse.TreeEvent", funksjon (evt) ); La oss ta en titt på den delen etter seksjon.
jQuery.event.special.toggleCollapse = oppsett: funksjon (data, navneområder) for (var jeg i navneområder) if (namespaces [i] == "TreeEvent") jQuery (dette) .bind jQuery.event.special.toggleCollapse.TreeEvent.handler); ,
Den første linjen jQuery.event.special.toggleCollapse lager en ny spesiell hendelse som heter toggleCollapse. Vi har så vår oppsettsmetode, som gjenkjenner over alle navneområdene til denne hendelsen. En gang finner den TreeEvent, det binder en klikkhendelse til de matchede elementene, som vil ringe jQuery.event.special.toggleCollapse.TreeEvent.handler når hendelsen er sparken. Merk, vi bruker en klikkhendelse i motsetning til funksjonen toggle () vi brukte eariler. Dette skyldes at toggle () ikke er en hendelse, men en interaksjonshjelpsfunksjon.
teardown: funksjon (namespaces) for (var jeg i navneområder) if (namespaces [i] == "TreeEvent") jQuery (dette) .unbind ('klikk', jQuery.event.special.toggleCollapse.TreeEvent.handler ); , Teardown-metoden ligner vår oppsettsmetode, men i stedet vil vi knytte klikkhendelsen fra alle matchede elementer.
TreeEvent: handler: function (event) if (event.target == event.currentTarget) var elt = jQuery (dette); var cssClass = "kollapset"; hvis (elt.hasClass (cssClass)) elt.children (). slideDown (). end (). removeClass (cssClass); ellers elt.children (). slideUp (). end (). addClass (cssClass); event.type = "toggleCollapse"; jQuery.event.handle.apply (dette, argumenter); ;
Her bruker vi TreeEvent-navneområdet til å abstrahere handleren. I handler skifter vi mellom et sammenbrudd og en utvidet tilstand, avhengig av om det matchede elementet inneholder CSS-klassen "kollapset". Til slutt setter vi arrangementstypen til navnet vårt på arrangementet, toggleCollapse og bruk søkemåten () som vil utføre tilbakekallingsargumentet når vi binder denne spesielle hendelsen.
$ ("# tree li: parent"). bind ("toggleCollapse.TreeEvent", funksjon (evt) ); Endelig binder vi vår spesielle begivenhet til katalogene i vår katalogoppføring. Vårt endelige resultat kan ses her.
Nedenfor finner du noen ekstra ressurser du kan finne nyttige når du arbeider med tilpassede arrangementer. Takk for at du leste!
