Hendelseshåndtering med jQuery

De arrangementer er situasjoner som oppstår i dokumentet vårt HTML, kan utløses av situasjoner i selve systemet eller av brukerhandlinger. I begge tilfeller er det mulig å utføre en etterbehandling ved hjelp av en hendelse jQuery, slik at vi kan oppnå bedre effekter i programmene våre.
Dette er av største betydning, siden vi kjenner dette aspektet og ved hjelp av rammeverket kan vi gi våre nettsider og applikasjoner mer dynamikk.
Dette er det første vi bør svare på når vi jobber med hendelser i jQuery, Vi hadde allerede sagt at hendelser er handlinger eller situasjoner som utløses av systemet eller av brukeren, for eksempel når dokumentet er lastet inn, utløser systemet hendelsen klar eller klar, når en bruker klikker på et element, utløses en homonym hendelse.
Med disse små eksemplene i tankene, kan vi deretter se den grunnleggende syntaksen for å håndtere enhver type hendelse, som er følgende:

$ (velger) .on ("eventName", funksjon () {….})

La oss huske eller presisere at velgeren er navnet vi skal finne elementet i dokumentet med, deretter ved hjelp av metoden .on () Vi kan deretter fortelle den hvilken hendelse den skal lytte til, og når den oppdager den, kan den utføre en anonym funksjon i skriptdelen av HTML.
Noe interessant som vi kan markere er at vi kan bruke en behandler for ulike arrangementerMed andre ord, vi kan utføre den samme handlingen i flere situasjoner, vi trenger bare å liste opp de forskjellige hendelsene som må lyttes til, syntaksen er veldig lik den vi nettopp har sett.
$ (velger) .on ("hendelsesnavn1 hendelsesnavn2 hendelsesnavn3 ….", funksjon () {….})
Siden vi vet det mest grunnleggende, må vi også begynne å vite det jQuery Det vil alltid gjøre livet lettere for oss som utviklere, så det har gitt noen snarveier for å lage hendelsesbehandlere, med dette trenger vi ikke å fullføre erklæringen som vi så i forrige del, men vi bruker disse snarveiene direkte til velgeren.
La oss se noen av de mest interessante snarveiene som brukes av utviklere. Det skal bemerkes at det ikke er den komplette listen over de som er tilgjengelige. For å få denne listen er det bedre å gå direkte til den offisielle dokumentasjonen, men for å få en liten start på emne, disse er mer enn nok.
klar ()Kjører når alle elementene i dokumentet SOL de er lastet, det vil si når nettstedet er klart, derav navnet. Det skal bemerkes at dette er en systemhendelse.
sende inn ()Det skjer når vi lager en innsending av skjemaDet interessante er at når skjemaet oppstår, sender det ikke på tradisjonell måte, men venter på hva denne hendelsen forteller det, så vi kan bruke det som et mellompunkt for feltvalideringer for å nevne et eksempel på bruken av det.
klikk ()Den kjører når brukeren gjør det klikk med musepekeren over et element, kan det være fra et input -type felt, for å inkludere elementer som f.eks eller ankre . Hvordan vi kan fortelle det er en hendelse utløst av brukeren.
uklarhet ()Det oppstår når elementet vi er for øyeblikket er ute av fokus, for eksempel skriver vi i et tekstfelt og går til et neste felt, i dette tilfellet har det første feltet mistet fokus og denne hendelsen blir utført.
fokus ()I motsetning til den forrige hendelsen skjer dette akkurat når vi fokuserer på et element.
sveve ()Denne hendelsen skjer når vi holder musepekeren over et element av SOL, kan vanligvis brukes på og ankre .
å velge ()Oppstår når vi velger et element i et felt å velgeFor eksempel har vi en rullegardinliste, og vi velger et element fra innholdet.
endring ()Oppstår når verdien eller tilstanden til et element endres, for eksempel i et felt å velge, når vi endrer alternativet som vi ser reflektert der.
Siden vi vet litt om de mest brukte hendelsene, kommer vi til å generere et lite dokument som setter noen av dem i praksis, enten i sin fulle syntaks eller med eksempler, slik at vi kan eksperimentere med begge skjemaene.
I den følgende koden vil vi se hvordan vi i utgangspunktet skal skrive med console.log () når vi har dokumentet i klar (), så bruker vi en annen melding når vi holder musen over a for å bekrefte hvordan det fungerer sveve, endelig får vi se hvordan vi bruker klikk () Y fokus () for å vise andre meldinger. La oss se på koden som beskriver ovenstående:

 Hendelseseksempel 1
Mus over denne Div !!

Skriv noe her:
Fokuser på meg:
$ (document) .ready (function () {console.log ("Den klare hendelsen har skjedd !!");}); $ ("# hover event"). hover (function () {console.log ("Hover hendelse skjedde!");}); $ ("# Klikkhendelse"). Klikk (funksjon () {console.log ("vi har utløst en klikkhendelse FORSTØRRE
Dette skjer når vi vil at et element skal ha forskjellige tilknyttede hendelser, på denne måten kan vi bedre organisere koden vår og gi elementet flere funksjoner.
Det er to muligheter: å utføre den samme handlingen for flere hendelser eller utføre en annen handling for hver enkelt. På hvilken som helst måte vi ønsker må vi bruke hele syntaksen, den første vi allerede har definert i begynnelsen.
La oss se hvordan du kobler forskjellige handlinger til forskjellige hendelser for det samme elementet. For dette må vi bruke en basissyntaks som følgende:

 $ (velger) .on ({EventName1: function () {…}, EventName2: function () {…}}); 

Som vi kan se, når vi bruker denne syntaksformen, unngår vi å måtte gjøre noe som følgende:

 $ (velger) .ShortcutEvent1 (funksjon () {}); $ (velger) .ShortcutEvent2 (funksjon () {}); 

Hva tillater oss å være mer organisert, men begge er gyldige, og det er opp til utvikleren å bruke den som passer ham best.
Siden vi vet hvordan vi skal koble flere hendelser til et element, skal vi sette det i praksis, vi kommer til å velge hendelsene klikk () Y fokus () For dette eksemplet, så skal vi bruke dem på to elementer, i det første elementet skal vi generere samme respons for hver av dem, og i den andre vil hver hendelse ha sitt eget svar. La oss se koden som vi må utføre for å nå målet vårt:

 Hendelseseksempel 2
Samme resultat flere hendelser:

Ulike resultater per arrangement:
$ ("# element1"). on ("klikkfokus", funksjon () {console.log ("vi viser det samme for 3 hendelser!");}); $ ("# element2"). på ({click: function () {console.log ("vi har klikket på element2");}, focus: function () {console.log ("vi har fokusert på element2");}}); 

Her ser vi at vi må være forsiktige med den andre formen for forskjellige svar for forskjellige hendelser, siden hendelsene ikke går inn i anførselstegn som når vi gjør det i den første formen, også at vi må legge innenfor parenteser {} alt inne i metoden .on (), dette er en feil som kan oppstå veldig ofte, så med denne forhåndsregelen kan vi unngå den. La oss nå se hvordan vårt eksempel ser ut når vi kjører det i nettleseren vår:

FORSTØRRE
Vi noterer disken med en Nummer 2 når hendelsene på det første elementet skjer, betyr dette at vi har utført den samme handlingen to ganger som vi hadde planlagt. I det andre elementet merker vi at vi skriver ut de to bestemte handlingene i konsollen, selv om vi også ser at de forekommer i en annen rekkefølge enn den vi plasserte dem, er dette fordi hendelsen fokus skjer før klikk i hendelseshierarkiet, spesielt hvis vi bruker nøkkelen TAB å flytte mellom feltene.
På slutten av denne opplæringen har vi lært hvordan vi kan komme i gang i en verden av hendelseshåndtering med jQueryDette er bare en munnåpner, men med disse små funksjonene kan vi oppnå mange ting i applikasjonene våre.

Hjalp denne opplæringen deg?
Hvis ikke

HJELP FORBEDR DENNE VEILEDNINGEN!
Tror du at du kan korrigere eller forbedre denne opplæringen? Du kan sende utgaven din med endringene du anser som nyttige.
0 brukere har redigert denne opplæringen. Rediger og bli en anerkjent ekspert!
Rediger denne opplæringen

LIKNE VEILEDNINGER

Hvordan dra og ta bilder med JQuery UIHvordan lage et spinner- eller lastingikon med JQueryJQuery -plugins og biblioteker for webutviklingFlexigrid dynamisk rutenett med JQuery og PHPJSON -håndtering med Node.jsHendelseshåndtering i Node.jsHåndtering av buffere i Node.jsVanlige uttrykk med Jquery
Ingen kommentarer, vær den første!
Ikke vent lenger og gå inn på SolveticLegg igjen kommentarene dine og dra nytte av brukerkontoen Bli med!

Opprett kontoRegistrer deg GRATIS for å ha din Solvetic -kontoRegistrer en konto
IdentifisereHar du allerede en konto? Logg deg på herIdentifiser meg på kontoen min




Informasjon

 Publisert 12. des 2014 14:44
 Oppdatert 14. des 2014 05:44
 Besøk 3,7K
 NivåProfesjonell


Siste opplæringsprogrammer for JavaScript

Slik oppdaterer du NPM med PowerShell i Windows 10
Hvordan dra og ta bilder med JQuery UI
Hvordan lage et spinner- eller lastingikon med JQuery
Hvordan få et nettsted oversatt til flere språk

Se mer av JavaScript