jQuery-handledning (del 4) - Händelselyttare

Idag ska vi sparka upp det och visa verkligen var jQuery lyser - evenemang. Om du följde tidigare tutorials borde du nu ha en ganska bra förståelse av den grundläggande kodstrukturen i jQuery jQuery Handledning - Komma igång: Grunder och väljare JQuery Handledning - Komma igång: Grundläggande och väljare I förra veckan pratade jag om hur viktigt jQuery är till någon modern webbutvecklare och varför det är fantastiskt. Den här veckan tror jag att det är dags att vi fick våra händer smutsiga med lite kod och lärde oss hur ... Läs mer (och alla de hemska lockiga hängslen som går med det), liksom hur du hittar delar av DOM och några saker du kan göra för att manipulera dem Introduktion till jQuery (del 2): ​​Metoder och funktioner Introduktion till jQuery (del 2): ​​Metoder och funktioner Detta är en del av en pågående nybörjare introduktion till jQuery webbprogrammeringsserier. Del 1 omfattade jQuery-grunderna om hur man ska inkludera det i ditt projekt och väljare. I del 2 fortsätter vi med ... Läs mer. Jag har också visat dig hur du får tillgång till utvecklarkonsolen i Chrome. Webbplatsproblem med Chrome Developer Tools eller Firebug Uträtta webbproblem med Chrome Developer Tools eller Firebug Om du har följt mina jQuery-tutorials hittills har du kanske redan stött på några kodproblem och inte känt hur man fixar dem. När man står inför en icke-funktionell kodbit är det väldigt ... Läs mer och hur du kan använda den för att felsöka din jQuery-kod.

Händelser - bland andra användningar - låter dig reagera på saker som händer på sidan och användarinteraktionerna - klicka, bläddra och allt som gillar saker.

Vad är en händelse ändå?

För de som är nyprogrammerade med ett grafiskt gränssnitt av något slag, hänvisar händelser till någon form av interaktion mellan användaren och applikationen. eller kan genereras internt med någon annan process. Applikationer väljer vilka händelser till “lyssna efter”, och när händelsen utlöses kan de reagera på något sätt.

Om du trycker på på din iPhone-skärm kommer du till exempel att skapa en enda “tryck händelse” med en x, y-koordinat av exakt var du knackade på. Om du knackade på ett visst objekt, som en knapp, är det troligt att knappen lyssnade på den händelsen och kommer att utföra en viss åtgärd i enlighet med detta. Om det bara var en tom del av gränssnittet, var ingenting fäst vid händelsen och så kommer ingenting att hända.

Att dra ditt finger över skärmen skulle generera en annan händelse, en som innehåller information om start- och slutpunkten för dragrörelsen, och kanske hastigheten. Evenemang ger oss ett enkelt sätt att reagera på saker som händer.

Enkelt: Klicka på

Kanske är det enklaste händelsen att lyssna på, klickhändelsen, avfyrade när en användare klickar på ett element. Detta behöver inte vara en specifik “knapp” - Du kan bifoga en händelseloggare till allt på skärmen, men som webbutvecklare behöver du självklart göra det intuitivt. Skapa en pseudoknapp ur brevet en gömd i ett stycke text är möjligt, men lite dumt.

Metoderna för att bifoga en händelselogg har förändrats avsevärt under åren som jQuery har utvecklats, men det här är den nuvarande accepterade metoden, med användning av ():

$ (Väljare) .På (händelse, handling);

Att lyssna på a “klick” händelse på några element i klassen .Klicka här, och logga sedan ett meddelande till konsolen som innehåller text av det element som du klickade på skulle du göra:

$ (". clickme"). på ("klicka", funktion () console.log ($ (this) .text ()););

Du bör kunna se att den åtgärd vi har inbäddat här är en anonym funktion som använder detta väljaren (som hänvisar till vilket objekt som jQuery hanterar för närvarande) - i det här fallet den sak som klickades på. Vi tar sedan ut texten till det klickade objektet och loggar det till konsolen. Lätt, rätt?

Stoppa standardåtgärden:

Vid något tillfälle vill du bifoga något som en länk eller formulär skickar knappen som vanligtvis gör något annat. I så fall är det ganska sannolikt att du inte vill att den ursprungliga åtgärden ska utföras - i stället vill du göra lite fina AJAX eller speciella jQuery magi.

För att förhindra att standardåtgärden händer, har vi en praktisk metod som heter preventDefault. Självklart. Låt oss se hur det skulle fungera när det handlar om en inlämningsknapp för en blankett

$ ("# myForm"). ("Skicka", funktion (händelse) console.log (event); event.preventDefault (); return false;);

Några ändringar här - för det första fäster vi på lämna händelse istället för klicka. Detta är mer lämpligt när man hanterar ett formulär som användaren kan fliken-space, träffa stiga på, eller slå en lämna knappen - som alla skulle utlösa formens standardåtgärd. Vi överför även händelsesvariabeln till den anonyma funktionen, så vi kan referera till händelsedata. Vi har sedan använt event.preventDefault () i kombination med returnera falskt för att stoppa alla vanliga åtgärder från att slutföra.

I det här fallet loggar bara händelsen till konsolen, men i verkligheten skulle du förmodligen ha en AJAX-handlare här, som vi kommer att ta itu med i nästa lektion.

Händelser kan också utlösas av dig

I de två senaste exemplen använde vi på-metoden för att lyssna på en händelse, men du kan också manuellt utlösa en händelse genom att kalla den som en metod istället. Det är svårt att se varför du kan använda detta för att tvinga en “klick”, men det är mer meningsfullt om vi tittar på fokushändelsen.

Fokus används vanligtvis med inmatningsfält för att avaktivera ett meddelande när användaren klickar i rutan för att skriva in text - ett instruktionsmeddelande på det format som ska användas till exempel. Men du kan också använda den för att tvinga användaren till användarnamnet när sidan har laddats - så de kan omedelbart börja skriva in deras inloggningsuppgifter.

$ (dokument) .ready (funktion () $ ('# username'.focus (););

Om du också hade bifogat en fokushändelselyttare till det användarnamnet fältet skulle det också utlösas när du tvingas fokusera. Händelser kan därför både utlösas och lyssnas på.

För närvarande övning genom att bifoga olika händelser på sidan - du kan hitta en fullständig lista över alla händelser som finns här - kom ihåg att använda preventDefault om det är en länk eller knapp och se vilken produkt du får från konsolen om händelsedata.

Jag lämnar det där idag när vi närmar oss slutet av den här mini-serien av jQuery-handledning. Du borde i slutet av det vara tillräckligt säker för att kasta lite jQuery på din sida och få det att göra något. Nästa vecka tittar vi på AJAX - en viktig del av den moderna webben som låter dig ladda och skicka förfrågningar i bakgrunden utan att avbryta användaren.

Som alltid välkomnas feedback, frågor, kommentarer och problem nedan.

Bildkredit: Pekskärm via Shutterstock

Utforska mer om: JavaScript, jQuery, Programmering, Webbutveckling.