jQuery-veiledning (del 4) - Event Lyttere

Annonse

I dag skal vi sparke det oppe og virkelig vise hvor jQuery skinner - hendelser . 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 bracesene som følger med det), samt hvordan finner du elementer i DOM og noen ting du kan gjøre for å 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 websideproblemer 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 alle de fancy 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 velger hvilke hendelser å "lytte til", og når den hendelsen utløses, kan de reagere på en eller annen måte.

Hvis du trykker på iPhone-skjermen, vil du for eksempel generere en enkelt "tap-hendelse" 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 bestemt "knapp" - du kan knytte en hendelseslytter til noe på skjermen, men som webutvikler må du selvsagt gjøre det intuitivt. Å lage en pseudoknapp ut av brevet er skjult i et tekststykke, men noe 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 ():

$(selector).on(event, action); 

For å lytte etter en "klikk" -hendelse på elementene med klassen .clickme, og logg deretter en melding til konsollen som inneholder teksten til elementet klikket på, ville du gjøre det:

 $(".clickme").on("click", function(){ console.log($(this).text()); }); 

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

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 noen fancy AJAX eller spesielle 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").on("submit", function(event){ console.log(event); event.preventDefault(); return false; }); 

Noen få endringer her - for det første knytter vi til innleveringshendelsen i stedet for å klikke. Dette er mer hensiktsmessig når det gjelder et skjema som brukeren kan ha tabulatortrykk, trykke inn eller trykke på sende- knappen - som alle vil utløse formens standardhandling. Vi overfører også hendelsesvariabelen til den anonyme funksjonen, så vi kan referere til hendelsesdataene . Vi har da brukt event.preventDefault () i kombinasjon med retur false for å 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 et "klikk", men det 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.

 $(document).ready(function(){ $('#username'.focus(); }); 

Hvis du også hadde knyttet 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 praksis 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 link 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