Begivenhedshåndtering med jQuery

Det begivenheder er situationer, der opstår i vores dokument HTML, kan udløses af situationer i selve systemet eller af brugerhandlinger. I begge tilfælde er det muligt at foretage en efterbehandling ved hjælp af jQuery, så vi kan opnå bedre effekter i vores programmer.
Dette er af største betydning, da vi kender dette aspekt og ved hjælp af rammen kan give vores websider og applikationer mere dynamik.
Dette er det første, vi skal svare, når vi arbejder med begivenheder i jQuery, Vi havde allerede sagt, at hændelser er handlinger eller situationer, der udløses af systemet eller af brugeren, for eksempel når dokumentet er færdigt indlæst, udløser systemet hændelsen parat eller klar, når en bruger klikker på et element, udløses en ensartet begivenhed.
Med disse små eksempler i tankerne kan vi derefter se den grundlæggende syntaks for at håndtere enhver form for hændelse, hvilket er følgende:

$ (vælger) .on ("eventName", funktion () {….})

Lad os huske eller præcisere, at vælgeren er det navn, som vi skal lokalisere elementet i i vores dokument, derefter ved hjælp af metoden .på () Vi kan derefter fortælle den, hvilken begivenhed den skal lytte til, og når den opdager den, kan den udføre en anonym funktion i vores scriptafsnit i HTML.
Noget interessant, som vi kan fremhæve, er, at vi kan bruge en handler til forskellige arrangementerMed andre ord kan vi udføre den samme handling i flere situationer, vi skal kun liste de forskellige hændelser, der skal lyttes til, syntaksen ligner meget den, vi lige har set.
$ (vælger) .on ("hændelsesnavn1 hændelsesnavn2 hændelsesnavn3 ….", funktion () {….})
Da vi ved det mest basale, må vi også begynde at vide det jQuery Det vil altid gøre vores liv lettere som udviklere, så det har givet nogle genveje til at oprette eventhåndterere, med dette behøver vi ikke at lave den komplette erklæring, som vi så i den foregående del, men vi anvender disse genveje direkte på vælgeren.
Lad os se nogle af de mest interessante genveje, der bruges af udviklere, det skal bemærkes, at det ikke er den komplette liste over de tilgængelige, for at få denne liste er det bedre at gå direkte til den officielle dokumentation, men for at starte lidt på emne, disse er mere end nok.
klar ()Kører når alle elementer i dokumentet SOL de er indlæst, det vil sige når webstedet er klar, deraf dets navn. Det skal bemærkes, at dette er en systemhændelse.
Indsend ()Det sker, når vi laver en indsendelse af formularDet interessante er, at når formen opstår, sender den ikke på traditionel vis, men snarere venter på, hvad denne begivenhed fortæller den, så vi kan bruge den som et mellemliggende punkt for feltvalideringer for at nævne et eksempel på dens anvendelse.
klik ()Det kører, når brugeren gør det klik med musemarkøren over et element, kan det være fra et input -type felt, for at inkludere elementer som f.eks eller ankre . Hvordan vi kunne fortælle, er en begivenhed udløst af brugeren.
sløring ()Det opstår, når det element, som vi er i øjeblikket, er ude af fokus, for eksempel skriver vi i et tekstfelt, og vi går til et næste felt, i dette tilfælde har det første felt mistet fokus, og denne begivenhed udføres.
fokus ()I modsætning til den tidligere begivenhed sker dette, bare når vi fokuserer på et element.
svæve ()Denne begivenhed sker, når vi holder musemarkøren over et element af SOL, kan normalt anvendes på og ankre .
Vælg ()Opstår, når vi vælger et element inden for et felt VælgFor eksempel har vi en rulleliste, og vi vælger et element fra dets indhold.
lave om ()Opstår, når værdien eller tilstanden af ​​et element ændres, f.eks. Inden for et felt Vælg, når vi ændrer den mulighed, som vi ser afspejlet der.
Da vi ved lidt om de mest brugte hændelser, vil vi generere et lille dokument, der sætter nogle af dem i praksis, enten i deres fulde syntaks eller med eksempler, så vi kan eksperimentere med begge former.
I den følgende kode vil vi se, hvordan vi i første omgang kommer til at skrive med console.log () når vi har dokumentet i klar (), så anvender vi en anden besked, når vi holder musen hen over a for at bekræfte, hvordan det fungerer svæve, endelig vil vi se, hvordan man bruger klik () Y fokus () for at vise andre meddelelser. Lad os se på koden, der beskriver ovenstående:

 Begivenhedseksempel 1
Hold musen over denne Div !!

Skriv noget her:
Fokuser på mig:
$ (dokument) .ready (funktion () {console.log ("Den klare begivenhed er sket !!");}); $ ("# hover event"). hover (function () {console.log ("Hover event skete!");}); $ ("# Click event"). Klik (function () {console.log ("vi har udløst en Click -begivenhed FORSTØRRE
Dette sker, når vi ønsker, at et element skal have forskellige tilknyttede begivenheder, på denne måde kan vi bedre organisere vores kode og levere vores funktionalitet flere funktioner.
Der er to muligheder, udførelse af den samme handling for flere begivenheder eller udførelse af en anden handling for hver enkelt, på enhver måde vi ønsker, bliver vi nødt til at bruge den komplette syntaks, den første vi allerede har defineret i begyndelsen.
Lad os se, hvordan man forbinder forskellige handlinger med forskellige begivenheder for det samme element. Til dette skal vi bruge en basissyntaks som følgende:

 $ (vælger) .on ({EventName1: function () {…}, EventName2: function () {…}}); 

Som vi kan se, når vi bruger denne form for syntaks, undgår vi at skulle gøre noget som følgende:

 $ (vælger) .ShortcutEvent1 (funktion () {}); $ (vælger) .ShortcutEvent2 (funktion () {}); 

Hvad giver os mulighed for at være mere organiseret, men begge er gyldige, og det er op til udvikleren at anvende den, der passer bedst til ham.
Da vi ved, hvordan vi forbinder flere begivenheder med et element, vil vi omsætte det til praksis, og vi vil vælge begivenhederne klik () Y fokus () I dette eksempel vil vi anvende dem på to elementer, i det første element vil vi generere det samme svar for hver af dem, og i det andet vil hver begivenhed have sit eget svar. Lad os se den kode, vi skal udføre for at nå vores mål:

 Begivenhedseksempel 2
Samme resultat flere begivenheder:

Forskellige resultater pr. Begivenhed:
$ ("# element1"). on ("klikfokus", funktion () {console.log ("vi viser det samme for 3 begivenheder!");}); $ ("# element2"). på ({klik: funktion () {console.log ("vi har klikket på element2");}, fokus: funktion () {console.log ("vi har fokuseret på element2");}}); 

Her ser vi, at vi skal være forsigtige med den anden form for forskellige svar for forskellige begivenheder, da hændelserne ikke går inde i citater, som når vi gør det i den første form, også at vi skal omslutte parenteser {} alt inde i metoden .på (), dette er en fejl, der kan opstå meget ofte, så med denne forholdsregel kan vi undgå det. Lad os nu se, hvordan vores eksempel ser ud, når vi kører det i vores browser:

FORSTØRRE
Vi noterer tælleren med en nummer 2 når begivenhederne på det første element opstår, betyder det, at vi har udført den samme handling to gange, som vi havde planlagt. I det andet element bemærker vi, at vi udskriver de to bestemte handlinger i konsollen, selvom vi også ser, at de forekommer i en anden rækkefølge end den, vi placerede dem, skyldes det, at hændelsen fokus sker før klik i begivenhedshierarkiet, især hvis vi bruger nøglen TAB at bevæge sig mellem felterne.
I slutningen af ​​denne vejledning har vi lært, hvordan vi kan komme i gang i en verden af ​​begivenhedshåndtering med jQueryDette er bare en mundåbner, men med disse små funktioner kan vi opnå mange ting i vores applikationer.

Hjalp denne tutorial dig?
Hvis ikke

HJÆLP FORBEDR DENNE TUTORIAL!
Tror du, at du kan rette eller forbedre denne vejledning? Du kan sende din udgave med de ændringer, du anser for nyttige.
0 brugere har redigeret denne vejledning. Rediger og bliv en anerkendt ekspert!
Rediger denne vejledning

LIGNENDE VEJLEDNINGER

Sådan trækker og tager du billeder med JQuery UISådan laver du et Spinner- eller indlæserikon med JQueryJQuery -plugins og biblioteker til webudviklingFlexigrid dynamisk gitter med JQuery og PHPJSON -håndtering med Node.jsHændelseshåndtering i Node.jsHåndtering af buffere i Node.jsRegelmæssige udtryk med Jquery
Ingen kommentarer, vær den første!
Vent ikke længere og indtast SolveticEfterlad dine kommentarer og udnyt brugerkontoen Tilmeld dig!

Opret kontoTilmeld dig GRATIS for at få din Solvetic -kontoRegistrer en konto
IdentificereHar du allerede en konto? Log ind herIdentificer mig på min konto




Information

 Udgivet 12. dec 2014 14:44
 Opdateret 14. dec 2014 05:44
 Besøg 3,7K
 NiveauProfessionel


Seneste JavaScript -selvstudier

Sådan opdateres NPM med PowerShell i Windows 10
Sådan trækker og tager du billeder med JQuery UI
Sådan laver du et Spinner- eller indlæserikon med JQuery
Sådan får du oversat et websted til flere sprog

Se mere af JavaScript