Share
Det er viktig å huske på at du kan erklære så mange egendefinerte klar() hendelser som du vil. Du er ikke begrenset til å legge ved en enkelt .klar() hendelse til dokumentet. De klar() hendelser utføres i den rekkefølgen de er inkludert i.
Merknader: Passerer jQuery-funksjonen, en funksjon - f.eks. jQuery (funciton () // kode her) - er en snarvei for jQuery (dokument) .ready ().
Bruker binde() metode - f.eks. jQuery ( 'a'). bind ( 'klikk' funksjon () ) - Du kan legge til noen av følgende standardbehandlere til de aktuelle DOM-elementene.
Accentsconagua
uklarhetfokuslasteendre størrelse påblalessebeforeunloadklikkDblClickmousedownmouseupmousemovemus overmouseoutendringå velgesende innkeydowntastetrykkkeyupfeilSelvfølgelig, basert på DOM-standarder, er det bare enkelte håndtere som faller sammen med bestemte elementer.
I tillegg til denne listen over standardhåndterere kan du også utnytte binde() å knytte jQuery tilpassede håndtere - f.eks. mouseenter og mouseleave - så vel som eventuelle tilpassede håndtere du kan opprette.
For å fjerne standardbehandlere eller tilpassede håndteringsverktøy, passerer vi bare frigi () Metode håndteringsnavnet eller egendefinert håndteringsnavn som må fjernes - f.eks. jQuery ( 'a'). frigi (klikk). Hvis ingen parametere sendes til frigi (), Det vil fjerne alle håndtere tilknyttet et element.
Disse konseptene som diskuteres, er uttrykt i kodeseksempelet nedenfor.
Merknader: jQuery gir flere snarveier til binde() Metode for bruk med alle standard DOM-hendelser, som ekskluderer egendefinerte jQuery-hendelser som mouseenter og mouseleave. Ved å bruke disse snarveiene innebærer det bare å bytte hendelsesnavn som metodenavn - f.eks. .Klikk (), mouseout (), fokus().
Du kan knytte ubegrensede håndtere til et enkelt DOM-element ved hjelp av jQuery.
jQuery gir en() hendelseshåndteringsmetode for å binde en hendelse til DOM-elementer som vil bli utført en gang og deretter fjernet. De en() Metoden er bare en wrapper for binde() og frigi ().
Synkroniseringen av snarveien - f.eks. .Klikk (), mouseout (), og fokus() - for å binde en hendelseshandler til et DOM-element kan også brukes til å påkalle håndteringsprogrammer. For å gjøre dette, bruk bare snarveishendelsesmetoden uten å overføre den til en funksjon. I teorien betyr dette at vi kan binde en handler til et DOM-element og deretter umiddelbart påkalle denne handleren. Nedenfor viser jeg dette via Klikk () begivenhet.
Si hei Si hei
Merknader: Det er også mulig å bruke arrangementet avtrekker() metode for å påkalle bestemte håndtere - f.eks. jQuery ('a'). klikk (funksjon () alarm ('hei')). trigger ('klikk'). Dette vil også fungere med namespaced og tilpassede hendelser.
jQuery normaliserer hendelsesobjektet i henhold til W3C-standarder. Dette betyr at når hendelsesobjektet sendes til en funksjonshåndterer, trenger du ikke å bekymre deg for nettleserespesifikke implementeringer av hendelsesobjektet (for eksempel Internet Explorer window.event). Du kan bruke følgende attributter og metoder for hendelsesobjektet uten bekymringer fra nettleserforskjeller fordi jQuery normaliserer hendelsesobjektet.
event.typeevent.targetevent.dataevent.relatedTargetevent.currentTargetevent.pageXevent.pageYevent.resultevent.timeStampevent.preventDefault ()event.isDefaultPrevented ()event.stopPropagation ()event.isPropagationStopped ()event.stopImmediatePropagation ()event.isImmediatePropagationStopped ()For å få tilgang til det normaliserte jQuery-hendelsesobjektet, bare passere den anonyme funksjonen, sendt til en jQuery-hendelsesmetode, en parameter som heter "event" (eller hva du vil kalle det). Deretter, inne i den anonyme tilbakeringingsfunksjonen, bruk parameteren for å få tilgang til hendelsesobjektet. Nedenfor er et kodet eksempel på dette konseptet.
Ofte vil vi ha et objekt i DOM som må ha flere funksjoner knyttet til en enkelt hendelseshåndterer. For eksempel, la oss ta størrelsesbehandleren. Ved hjelp av jQuery kan vi legge til så mange funksjoner til window.resize handler som vi liker. Men hva skjer når vi trenger å fjerne bare en av disse funksjonene, men ikke alle av dem? Hvis vi bruker $ (Vindu) .unbind ( 'resize'), alle funksjoner knyttet til window.resize handler vil bli fjernet. Ved navngivning av en handler (f.eks. resize.unique), kan vi tildele en unik krok til en bestemt funksjon for fjerning.
I koden ovenfor legger vi til to funksjoner til størrelsesbehandleren. Den andre (dokumentrekkefølgen) endre størrelsen til tilføyd tilføyet bruker hendelsesnavnspacing og fjerner umiddelbart denne hendelsen ved hjelp av frigi (). Jeg gjorde dette for å gjøre det poenget at den første funksjonen ikke er fjernet. Namespacing-hendelser gir oss mulighet til å merke og fjerne unike funksjoner som er tilordnet samme handler på et enkelt DOM-element.
I tillegg til å unbinding en bestemt funksjon assosiert med et enkelt DOM element og handler, kan vi også bruke hendelses navnespace til å utelukkende påberope (ved hjelp av avtrekker()) en bestemt håndterer og funksjon knyttet til et DOM-element. I koden nedenfor blir to klikkhendelser lagt til , og deretter bruker namespacing, bare en påberopes.
klikk
Merknader: Det er ingen grense for dybden eller antall navneområder som brukes - f.eks. resize.layout.headerFooterContent.
Namespacing er en fin måte å beskytte, påberope, fjerne eventuelle eksklusive håndterere som et plugin kan kreve.
Namespacing jobber med tilpassede hendelser samt standard hendelser - f.eks. click.unique eller myclick.unique.
Hendelse delegering er avhengig av hendelse propagering (a.b.bobling). Når du klikker på en innsiden av a , som er innsiden av a til til
Dette betyr at hvis vi knytter en klikkhendelse til en som er innkapslet innsiden av event.target) for å identifisere hvilket element i DOM faktisk forårsaket hendelsen boblende å begynne. Igjen, dette vil gi oss en referanse til elementet som startet boblingen.
Ved å gjøre dette kan vi tilsynelatende legge til en hendelsehandler til en stor del DOM-elementer ved å bruke bare en enkelt hendelseshandler / -deklarasjon. Dette er ekstremt nyttig; for eksempel et bord med 500 rader der hver rad krever et klikkhendelse kan dra nytte av hendelsesdelegasjonen. Undersøk koden nedenfor for avklaring.
Nå, hvis du skulle bokstavelig talt klikke på en av de aktuelle kulene i listen og ikke selve lenken, gjett hva? Du vil ende opp med å fjerne event.target er den , ikke . Siden dette er tilfelle, er ordnede () Metoden vil ta tak i når det klikkes fra en ved å passere ordnede () Metode et elementuttrykk.
$ (Event.target) .parent ( 'li') fjerne (.);
Det viktige punktet her er at du må håndtere nøye hva som blir klikket når det klikkbare området inneholder flere innkapslede elementer på grunn av det faktum at du aldri vet nøyaktig hvor brukeren kan klikke. På grunn av dette må du kontrollere at klikket skjedde fra elementet du forventet det til.
Bruke det praktiske bo() Hendelsesmetode, kan du binde håndterer til DOM-elementer som for øyeblikket er på en nettside, og de som ennå ikke er lagt til. De bo() Metoden bruker hendelsesdelegasjon for å sikre at nyopprettede / opprettede DOM-elementer alltid vil svare på hendelseshåndterere, uavhengig av DOM-manipulasjoner eller dynamiske endringer i DOM. Ved hjelp av bo() er i hovedsak en snarvei for manuelt å sette opp hendelsesdelegasjon. For eksempel bruker bo() Vi kan lage en knapp som skaper en annen knapp på ubestemt tid.
Etter å ha undersøkt koden, bør det være åpenbart at vi bruker bo() å bruke hendelsesdelegasjon til et overordnet element ( element i kodeeksemplet) slik at et hvilket som helst knappelement som legges til DOM, alltid reagerer på klikkbehandleren.
For å fjerne live-arrangementet bruker vi bare dø() Metoden-f.eks. $ ( 'Knappen'). Dø ().
Konseptet å ta bort er bo() Metode kan brukes til å knytte hendelser til DOM-elementer som blir fjernet og lagt til ved hjelp av AJAX. På denne måten vil du avstå fra å måtte knytte hendelser til nye elementer introdusert i DOM etter den første sidelasten.
Merknader: bo() støtter følgende håndtere: klikk, DblClick, mousedown, mouseup, mousemove, mus over, mouseout, keydown, tastetrykk, keyup.
bo() fungerer bare mot en velger.
bo() som standard vil stoppe forplantning ved å bruke returner falsk innenfor funksjonen sendt til bo() metode.
Det er mulig å passere arrangementet binde() Metode flere hendelseshåndterere. Dette gjør det mulig å feste den samme funksjonen, skrevet én gang, til mange håndtere. I kodeeksempelet nedenfor legger vi til en enkelt anonym tilbakeringingsfunksjon til klikk, tastetrykk, og endre størrelsesbegivenheter på dokumentet.
Når en kobling klikkes eller et skjema er sendt, vil nettleseren påberope sin standardfunksjonalitet knyttet til disse hendelsene. For eksempel, klikk på en lenke og nettleseren vil forsøke å laste verdien av href attributt i det nåværende nettleservinduet. For å stoppe nettleseren fra å utføre denne typen funksjonalitet, kan du bruke preventDefault () Metode for jQuery-normalisert hendelsesobjekt.
jQuery
Hendelser forplantes (f.eks. Boble) opp DOM. Når en hendelsehandler er avfyrt for et gitt element, blir den påkalte hendelseshandler også påkalt for alle forfedreelementer. Denne standardoppførelsen letter løsninger som eventdelegasjon. For å forby dette standardbobling, kan du bruke jQuery-normalisert hendelsesmetode stopPropagation ().
Stoppe
I kodeeksempelet ovenfor er hendelseshåndtereren festet til Returnerer falsk - f.eks. Hvis du skulle kommentere Med jQuery har du muligheten til å produsere dine egne tilpassede arrangementer ved hjelp av Nå, fordi disse hendelsene er tilpassede og ikke kjent for nettleseren, er den eneste måten å påberope egendefinerte hendelser, å programmere utløse dem ved hjelp av jQuery Som standard kloner DOM strukturer ved hjelp av Ved å legge ved en Det er ofte nødvendig å få X- og Y-koordinatene til musepekeren i forhold til et annet element enn visningsporten eller hele dokumentet. Dette gjøres vanligvis med ToolTips, hvor ToolTip vises i forhold til plasseringen som musen svever. Dette kan lett oppnås ved å subtrahere offset av det relative elementet fra visningsportens X- og Y-musekoordinater.
Avbryter standard oppførsel og begivenhetsformidling Via
returner falsk returner falsk - er ekvivalent med å bruke begge preventDefault () og stopPropagation (). Klikk på meg returner falsk uttalelse i koden ovenfor, varsling() ville bli påkalt fordi nettleseren som standard vil utføre verdien av href. Også siden ville navigere til jQuery.com på grunn av hendelsen boblende.
Opprett egendefinerte hendelser og utløs dem via utløser ()
binde() metode. Dette gjøres ved å tilby binde() metode med et unikt navn for en tilpasset hendelse.avtrekker() metode. Undersøk koden nedenfor for et eksempel på en tilpasset hendelse som er påkalt ved bruk av avtrekker().
Kloning av hendelser i tillegg til DOM-elementer
klone () Metoden klipper heller ikke hendelsene knyttet til DOM-elementene som blir klonet. For å klone elementene og hendelsene knyttet til elementene må du passere klone () Metode en boolsk verdi av ekte. Legg til en annen lenke
Få X og Y Koordinater av musen i Viewport
mousemove Hendelse til hele siden (dokument), kan du hente X-og Y-koordinatene til musemarkøren når den beveger seg inne i visningsporten over lerretet. Dette gjøres ved å hente pageY og pageX Egenskaper for jQuery-normalisert hendelsesobjekt.
Få X og Y Koordinater til musen i forhold til et annet element
