JQuery-tutorial (del 4)

Reklame

I dag vil vi sparke det ind i hak og virkelig vise, hvor jQuery skinner - begivenheder. Hvis du fulgte de tidligere tutorials, skulle du nu have en forholdsvis god forståelse af grundlæggende kodestruktur for jQuery jQuery-tutorial - Kom godt i gang: Basics & SelectorsSidste uge talte jeg om, hvor vigtigt jQuery er for 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 ... Læs mere (og alle de forfærdelige krøllede seler der følger med), 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 funktionerDette 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 ... Læs mere . Jeg viste dig også, hvordan du får adgang til udviklerkonsol i Chrome

Find ud af problemer med webstedet med Chrome Developer Tools eller FirebugHvis du har fulgt mine jQuery-tutorials indtil videre, har du muligvis allerede fundet nogle kodeproblemer og ikke vidst, hvordan du løser dem. Når man står over for en ikke-funktionel kodekode, er det meget ... Læs mere 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.

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 ”lytte til”, og når denne begivenhed udløses, kan de reagere på en eller anden måde.

For eksempel genererer en enkelt "tap-begivenhed" med en x, y-koordinat, nøjagtigt hvor du tappede, på din iPhone-skærm. 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 så vil der ikke ske noget.

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 en bestemt "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 inden for et tekststykke er muligt, men noget dumt.

Metoderne til at tilknytte 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 på():

$(vælgeren).på(begivenhed,handling);

At lytte til en “klik”Begivenhed på alle elementer i 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", function () { console.log ($ (dette) .text ()); });

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

Stop standardhandlingen:

På et tidspunkt vil du vedhæfte dig 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 lave 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 vi håndterer en indsenderknap til en formular

$ ("# myForm"). på ("indsende", funktion (begivenhed) { console.log (begivenhed); event.preventDefault (); vende tilbage 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, ramte gå ind, eller rammer 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 et "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 () { $ ( '# Username'.focus (); });

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 øjeblikket kan du øve dig ved at vedhæfte dig til forskellige begivenheder på siden - du kan finde en komplet oversigt over alle begivenheder tilgængelige 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ærmer sig slutningen af ​​denne miniserie 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 anmodninger i baggrunden uden at afbryde brugeren.

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

Billedkredit: Touchscreen via Shutterstock