jQuery-tutorial (del 4) - Begivenhedslyttere

I dag skal vi sparke det ind og indse, hvor jQuery skinner - begivenheder. Hvis du fulgte de tidligere tutorials, skulle du nu have en forholdsvis god forståelse af den grundlæggende kodestruktur for jQuery jQuery Tutorial - Kom godt i gang: Basics & Selectors jQuery Tutorial - Kom godt i gang: Basics & Selectors Sidste uge talte jeg om, hvor vigtigt jQuery er til enhver moderne webudvikler, og hvorfor det er fantastisk. Denne uge tror jeg, det er på tide, at vi får vores hænder beskidte med noget kode og lærte hvordan ... (og alle de forfærdelige krøllede seler, der følger med det), samt hvordan man finder elementer i DOM og nogle af tingene, du kan gøre for at manipulere dem Introduktion til jQuery (del 2): ​​Metoder og funktioner Introduktion til jQuery (del 2): ​​Metoder og funktioner Dette er del af en igangværende introduktion til jQuery webprogrammeringsserier. Del 1 dækkede grundlæggende oplysninger om jQuery om, hvordan man inkluderer det i dit projekt og vælgere. I del 2 fortsætter vi med…. Jeg viste dig også, hvordan du får adgang til udviklerkonsollen i Chrome Find ud af webstedets problemer med Chrome-udviklingsværktøjer eller Firebug Find ud af webstedsproblemer med Chrome-udviklingsværktøjer eller Firebug Hvis du har fulgt mine jQuery-tutorials indtil videre, har du muligvis allerede løbet ind nogle kodeproblemer og ikke kendt, hvordan man løser dem. Når du står over for en ikke-funktionel kodekode, er det meget ... og hvordan du muligvis bruger den til at fejlsøge din jQuery-kode.

Begivenheder - blandt andre anvendelser - giver dig mulighed for at reagere på ting, der sker på siden og brugerinteraktioner - at klikke, rulle og alt det smarte ting.

Hvad er en begivenhed alligevel?

For dem, der er nye inden for programmering, der involverer en grafisk grænseflade af en eller anden art, henviser begivenheder til enhver form for interaktion mellem brugeren og applikationen; eller kan genereres internt ved hjælp af en anden proces. Programmer vælger hvilke begivenheder, der skal “lyt efter”, og når denne begivenhed udløses, kan de reagere på en eller anden måde.

For eksempel genererer et enkelt tryk på din iPhone-skærm “tryk på begivenhed” med en x, y-koordinat for præcist, hvor du tappede. Hvis du bankede på et bestemt objekt, som en knap, er det sandsynligt, at knappen lytter til den begivenhed og vil udføre en handling i overensstemmelse hermed. Hvis det kun var en tom del af grænsefladen, blev der ikke knyttet noget til begivenheden, og der sker intet.

Trækning af fingeren hen over skærmen genererer en ny begivenhed, en der inkluderer information om start- og slutpunktet for trækbevægelsen og måske hastigheden. Begivenheder giver os en nem måde at gøre det på reagerer på ting, der sker.

Let: Klik

Den letteste begivenhed at lytte til er måske klikbegivenheden, der fyres hver gang en bruger klikker på et element. Dette behøver ikke være et specifikt “knap” - du kan knytte en begivenhedslytter til noget på skærmen, men som webudvikler skal du naturligvis gøre det intuitivt. Oprettelse af en pseudo-knap ud af brevet -en skjult i et tekstafsnit er muligt, men noget dumt.

Metoderne til at vedhæfte en begivenhedslytter har ændret sig markant gennem årene, efterhånden som jQuery har udviklet sig, men dette er den aktuelle accepterede metode ved hjælp af ():

$ (Selector) .fra (begivenhed, handling);

At lytte til en “klik” begivenhed på alle elementer med klassen .clickme, og logg derefter en meddelelse til konsollen, der indeholder tekst af det element, der blev klikket på, ville du gøre:

$ (". clickme"). på ("klik", funktion () console.log ($ (dette) .text ()););

Du skal kunne se, at handlingen, vi har indlejret her, er en anonym funktion, der bruger dette selector (som henviser til det objekt jQuery i øjeblikket har at gøre med) - i dette tilfælde det, der blev klikket på. Derefter trækker vi ud teksten til det klikkede objekt og logger det på konsollen. Let, ret?

Stop standardhandlingen:

På et tidspunkt vil du gerne knytte til noget som et link eller en formular-knap, der normalt gør noget andet. I hvilket tilfælde er det meget sandsynligt, at du ikke ønsker, at den originale handling skal udføres - i stedet vil du gøre noget fancy AJAX eller speciel jQuery-magi.

For at forhindre, at standardhandling sker, har vi en praktisk metode kaldet preventDefault. Naturligvis. Lad os se, hvordan det ville fungere, når du arbejder med en indsenderknap til en formular

$ ("# myForm"). på ("indsende", funktion (begivenhed) console.log (event); event.preventDefault (); return falsk;);

Et par ændringer her - for det første knytter vi os til Indsend begivenhed i stedet for klik. Dette er mere passende, når man håndterer en formular, som brugeren måtte have Fanen-plads, hit gå ind, eller ramte en Indsend -knap - som alle udløser formularens standardhandling. Vi overfører også begivenhedsvariablen til den anonyme funktion, så vi kan henvise til begivenhedsdata. Vi har derefter brugt event.preventDefault () i kombination med vende tilbage falsk for at forhindre, at alle de sædvanlige handlinger afsluttes.

I dette tilfælde logger det kun begivenheden til konsollen, men i virkeligheden ville du sandsynligvis have en AJAX-handler her, som vi vil tackle i den næste lektion.

Begivenheder kan også udløses af dig

I de sidste to eksempler brugte vi on-metoden til at lytte til en begivenhed, men du kan også manuelt udløse en begivenhed ved at kalde den som en metode i stedet. Det er vanskeligt at se, hvorfor du muligvis bruger dette til at tvinge en “klik”, men giver mere mening, hvis vi ser på fokushændelsen.

Fokus bruges typisk sammen med inputfelter til at afbryde en meddelelse, når brugeren klikker i boksen for at indtaste tekst - en instruktionsmeddelelse på det format, der skal bruges, f.eks. Men du kan også bruge det til at tvinge brugeren ind i brugernavnfeltet, når siden er indlæst - så de straks kan begynde at indtaste deres loginoplysninger.

$ (dokument). allerede (funktion () $ ('# brugernavn'.fokus (););

Hvis du også havde knyttet en fokushændelseslytter til dette brugernavnfelt, ville den også blive udløst, når du tvang fokus. Begivenheder kan derfor både udløses og lytter til.

For tiden kan du øve dig ved at vedhæfte dig til forskellige begivenheder på siden - du kan finde en komplet liste over alle de tilgængelige begivenheder her - husk at bruge preventDefault, hvis det er et link eller en knap, og se, hvilket output du får fra konsollen om begivenhedsdata.

Jeg forlader det der i dag, da vi nær ved slutningen af ​​denne mini-serie af jQuery-tutorials. Du skal ved afslutningen være sikker nok til at smide noget jQuery på din side og få det til at gøre noget. I næste uge ser vi på AJAX - en vigtig del af det moderne web, der giver dig mulighed for at indlæse og sende forespørgsler i baggrunden uden at afbryde brugeren.

Som altid er feedback, spørgsmål, kommentarer og problemer velkomne nedenfor.

Billedkredit: Berøringsskærm via Shutterstock