jQuery Tutorial (Part 4) - Event Lyttere

Reklame

I dag skal vi sparke det op og vise virkelig hvor jQuery skinner - begivenheder . Hvis du fulgte de tidligere tutorials, skal du nu have en temmelig god forståelse af den grundlæggende kodestruktur i jQuery jQuery Tutorial - Kom godt i gang: Grundlæggende & Selectors jQuery Tutorial - Kom i gang: Grundlæggende & Selectors I sidste uge talte jeg om, hvor vigtigt jQuery er til enhver moderne webudvikler og hvorfor det er fantastisk. I denne uge synes jeg, det er på tide, vi fik vores hænder beskidte med nogle kode og lærte hvordan ... Læs mere (og alle de forfærdelige krøllebøjler, der følger med det), samt hvordan finder du elementer i DOM og nogle ting 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 en del af en igangværende introduktion til jQuery webprogrammeringsserier. Del 1 dækkede grunden til jQuery om, hvordan du medtager det i dit projekt og vælgere. I del 2 fortsætter vi med ... Læs mere. Jeg har også vist dig, hvordan du får adgang til udviklerkonsollen i Chrome. Udregne websiderproblemer med Chrome Developer Tools eller Firebug Find ud af websitetsproblemer med Chrome Developer Tools eller Firebug. Hvis du har fulgt mine jQuery-tutorials indtil nu, har du måske allerede kørt ind i nogle kodeproblemer og ikke kendt hvordan man retter dem. Når man står over for en ikke-funktionel kodekode, er det meget ... Læs mere og hvordan du kan bruge det til at debugere din jQuery-kode.

Begivenheder - blandt andre anvendelser - giver dig mulighed for at reagere på ting der sker på siden og brugerinteraktioner - klikke, rulle og alle de ting, der har lyst til.

Hvad er en begivenhed i hvert fald?

For de nye til 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 en anden proces. Applikationer vælger hvilke hændelser der skal "lytte til", og når den begivenhed udløses, kan de reagere på en eller anden måde.

Hvis du f.eks. Trykker på din iPhone-skærm, vil du generere en enkelt "tap-begivenhed" med en x, y-koordinat af præcis, hvor du tappede. Hvis du tappede på et bestemt objekt, som en knap, er det sandsynligt, at knappen lyttede 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 ikke noget.

At trække fingeren over skærmen ville generere en anden begivenhed, som indeholder oplysninger om start- og slutpunktet af trækbevægelsen og måske hastigheden. Begivenheder giver os en nem måde at reagere på ting, der sker .

Nem: Klikker på

Måske er den nemmeste begivenhed at lytte til, klikhændelsen, fyret, når en bruger klikker på et element. Dette behøver ikke at være en bestemt "knap" - du kan vedhæfte en begivenhedslytter til noget på skærmen, men som webudvikler skal du selvfølgelig gøre det intuitivt. Oprettelse af en pseudo-knap ud af brevet, der er skjult inden for et tekststykke, er muligt, men noget dumt.

Metoderne til at vedhæfte en hændelseslytter har ændret sig betydeligt i løbet af de år, som jQuery har udviklet, men dette er den nuværende accepterede metode, der bruger på ():

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

Hvis du vil lytte efter et "klik" -begivenhed på nogen elementer med klassen .clickme, og log derefter en besked til konsollen, der indeholder teksten til elementet klikket på, ville du gøre:

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

Du skal kunne se, at den handling, vi har indlejret her, er en anonym funktion, der bruger denne vælger (som refererer til det objekt, som jQuery beskæftiger i øjeblikket med) - i dette tilfælde den ting, der blev klikket på. Vi uddrager derefter teksten til det klikte objekt og logger det til konsollen. Nemt, ikke?

Stop den standard handling:

På et tidspunkt vil du gerne knytte til noget som et link eller en formular, der sender knappen, som normalt gør noget andet. I så fald er det højst sandsynligt, at du ikke vil have den originale handling udført - i stedet vil du gøre nogle flotte AJAX eller specielle jQuery magi.

For at forhindre, at standard handling sker, har vi en praktisk metode kaldet preventDefault. Naturligvis. Lad os se, hvordan det ville fungere, når vi beskæftiger os med en indsende knap for en formular

 $("#myForm").on("submit", function(event){ console.log(event); event.preventDefault(); return false; }); 

Et par ændringer her - for det første vedhæftes vi til afsendelseshændelsen i stedet for at klikke. Dette er mere hensigtsmæssigt, når man beskæftiger sig med en formular, da brugeren kan tabulere plads, trykke på enter eller trykke på en send- knap - som alle vil udløse formularens standardhandling. Vi overfører også begivenhedsvariablen til den anonyme funktion, så vi kan henvise til begivenhedsdataene . Vi har derefter brugt event.preventDefault () i kombination med returnering falsk for at stoppe alle de sædvanlige handlinger fra at fuldføre.

I dette tilfælde logger kun begivenheden til konsollen, men i virkeligheden vil 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 svært at se, hvorfor du måske bruger dette til at tvinge et "klik", men det giver mere mening, hvis vi ser på fokushændelsen.

Fokus bruges typisk med indtastningsfelter for at slukke for en besked, når brugeren klikker i boksen for at indtaste tekst - en instruktionsmeddelelse på det format, der skal bruges, for eksempel. Men du kan også bruge den til at tvinge brugeren til brugernavnfeltet, når siden er indlæst - så de kan straks begynde at skrive deres loginoplysninger.

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

Hvis du også havde knyttet en fokushændelseslytter til dette brugernavn felt, ville det også blive udløst, når du tvangsfokus. Begivenheder kan derfor både udløses og lyttes til.

For øjeblikket praksis ved at vedhæfte forskellige begivenheder på siden - du kan finde en komplet liste over alle de hændelser, der er tilgængelige her - husk at bruge preventDefault, hvis det er et link eller en knap, og se, hvilken produktion du får fra konsollen om hændelsesdata.

Jeg vil efterlade det der i dag, da vi nærmer slutningen af ​​denne mini-serie af jQuery-tutorials. Du bør i slutningen af ​​det være sikker nok til at kaste nogle jQuery på din side og få det til at gøre noget. Næste uge vil vi se på AJAX - en vigtig del af det moderne web, som giver dig mulighed for at indlæse og sende henvendelser i baggrunden uden at afbryde brugeren.

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

Billedkredit: Touchscreen via Shutterstock