jQuery-veiledning (del 4) - Event Lyttere

I dag skal vi sparke det oppe og virkelig vise hvor jQuery skinner - arrangementer. Hvis du fulgte de tidligere opplæringsprogrammene, bør du nå ha en ganske god forståelse av den grunnleggende kodestrukturen i jQuery jQuery Tutorial - Komme i gang: Grunnleggende og valgmuligheter jQuery Tutorial - Komme i gang: Grunnleggende og valgorer I forrige uke snakket jeg om hvor viktig jQuery er til enhver moderne webutvikler og hvorfor det er kjempebra. Denne uken, jeg tror det er på tide at vi fikk hendene våre skitne med noen kode og lærte hvordan ... Les mer (og alle de fryktelige krøllete armbåndene som følger med det), samt hvordan finne elementer i DOM og noen ting du kan gjøre å manipulere dem Introduksjon til jQuery (del 2): ​​Metoder og funksjoner Introduksjon til jQuery (del 2): ​​Metoder og funksjoner Dette er en del av en igangværende introduksjon til jQuery webprogrammeringsserier. Del 1 dekket grunnleggende om jQuery om hvordan å inkludere det i prosjektet og selektorer. I del 2 fortsetter vi med ... Les mer. Jeg har også vist deg hvordan du får tilgang til utviklerkonsollen i Chrome. Finn ut nettsideproblemer med Chrome Developer Tools eller Firebug. Finn ut nettsideproblemer med Chrome Developer Tools eller Firebug Hvis du har fulgt mine jQuery-opplæringsprogrammer så langt, kan det hende du allerede har gått inn i noen kodeproblemer og ikke kjent hvordan du fikser dem. Når du møter en ikke-funksjonell bit av kode, er det veldig ... Les mer og hvordan du kan bruke den til å feilsøke jQuery-koden din.

Hendelser - blant andre bruksområder - lar deg reagere på ting som skjer på siden og brukerinteraksjoner - klikke, ruller og alt som har lyst på ting.

Hva er en hendelse uansett?

For de nye til programmering som involverer et grafisk grensesnitt av noe slag, refererer hendelser til enhver form for samspill mellom brukeren og applikasjonen; eller kan genereres internt av en annen prosess. Programmer velg hvilke hendelser til “lytt etter”, og når den hendelsen utløses, kan de reagere på en eller annen måte.

Hvis du for eksempel trykker på iPhone-skjermen, genereres en enkelt “trykk på hendelsen” med en x, y koordinat av nøyaktig hvor du tappet. Hvis du tappet på en bestemt gjenstand, som en knapp, er det sannsynlig at knappen lyttet etter den hendelsen, og vil utføre noe tiltak tilsvarende. Hvis det bare var en tom del av grensesnittet, var ingenting knyttet til hendelsen, og ingenting vil skje.

Å dra fingeren over skjermen ville generere en annen hendelse, en som inneholder informasjon om start- og sluttpunktet til drabevegelsen, og kanskje hastigheten. Hendelser gir oss en enkel måte å reagere på ting som skjer.

Lett: Å klikke

Kanskje den enkleste hendelsen å lytte etter er klikkhendelse, sparket når en bruker klikker på et element. Dette trenger ikke å være en spesifikk “knapp” - Du kan knytte en hendelseslytter til noe på skjermen, men som en webutvikler må du åpenbart gjøre det intuitivt. Opprette en pseudoknapp ut av brevet en Skjult i et avsnitt med tekst er mulig, men litt dumt.

Metodene for å knytte en hendelseslytter har forandret seg betydelig gjennom årene som jQuery har utviklet, men dette er nåværende akseptert metode, ved bruk av ():

$ (Velger) .På (hendelse, handling);

Å lytte etter en “klikk” arrangement på noen elementer med klassen .Klikk på meg, og logg deretter en melding til konsollen som inneholder tekst av elementet klikket på, ville du gjøre det:

$ ("clickme"). på ("klikk", funksjon () console.log ($ (dette) .text ()););

Du bør kunne se at handlingen vi har lagt inn her er en anonym funksjon som bruker dette selector (som refererer til hva objektet jQuery arbeider for øyeblikket) - i dette tilfellet er det som ble klikket på. Vi pakker deretter ut teksten til det klikkte objektet og logger det på konsollen. Lett, rett?

Stopp standardhandling:

På et tidspunkt vil du legge til noe som en link eller skjema sende inn som vanligvis gjør noe annet. I så fall er det ganske sannsynlig at du ikke vil at den opprinnelige handlingen skal utføres - i stedet vil du gjøre noe fancy AJAX eller spesiell jQuery magi.

For å forhindre at standardhandling skjer, har vi en praktisk metode som heter preventDefault. Åpenbart. La oss se hvordan det ville fungere når det handler om en sende-knapp for et skjema

$ ("# myForm"). på ("send", funksjon (hendelse) console.log (event); event.preventDefault (); return false;);

Noen få endringer her - for det første knytter vi til sende inn hendelsen i stedet for å klikke. Dette er mer hensiktsmessig når det gjelder et skjema som brukeren kan tab-plass, truffet Tast inn, eller trykk a sende inn knappen - som alle vil utløse skjemaets standardhandling. Vi overfører også hendelsesvariabelen til den anonyme funksjonen, så vi kan referere til hendelsesdata. Vi har da brukt event.preventDefault () i kombinasjon med returner falsk å stoppe alle vanlige handlinger fra å fullføre.

I dette tilfellet er det bare å logge hendelsen til konsollen, men i virkeligheten vil du sannsynligvis ha en AJAX-handler her, som vi skal takle i neste leksjon.

Hendelser kan også bli utløst av deg

I de to siste eksemplene brukte vi på-metoden til å lytte til en hendelse, men du kan også manuelt utløse en hendelse ved å kalle den som en metode i stedet. Det er vanskelig å se hvorfor du kan bruke dette til å tvinge en “klikk”, men gir mer mening hvis vi ser på fokushendelsen.

Fokus brukes vanligvis med inntastingsfelter for å avbrå en melding når brukeren klikker i boksen for å skrive inn tekst - en instruksjonsmelding på formatet som skal brukes for eksempel. Men du kan også bruke den til å tvinge brukeren til brukernavnet når siden har lastet inn - slik at de umiddelbart kan skrive inn innloggingsdetaljer.

$ (dokument) .ready (funksjon () $ ('# brukernavn'.fokus (););

Hvis du også hadde tilknyttet en fokushendelse lytter til det brukernavnet feltet, ville det også bli utløst når du tvunget fokus. Hendelser kan derfor både utløses og høres på.

For øvrig, praktiser ved å knytte til ulike hendelser på siden - du kan finne en fullstendig liste over alle hendelsene som er tilgjengelige her - husk å bruke preventDefault hvis det er en lenke eller knapp, og se hvilken utgang du får fra konsollen om hendelsesdata.

Jeg la den være der i dag som vi nær slutten av denne mini-serien av jQuery-opplæringsprogrammer. Du bør i slutten av det være trygg nok til å kaste litt jQuery på siden din og få det til å gjøre noe. Neste uke ser vi på AJAX - en viktig del av den moderne nettsiden som lar deg laste inn og sende forespørsler i bakgrunnen uten å forstyrre brukeren.

Som alltid, tilbakemelding, spørsmål, kommentarer og problemer velkommen nedenfor.

Bildekreditt: Berøringsskjerm via Shutterstock

Utforsk mer om: JavaScript, jQuery, Programmering, Webutvikling.