jQuery-handledning (del 4) - Händelselyttare

Annons

Idag ska vi sparka upp det och visa verkligen var jQuery lyser - händelser . Om du följde tidigare tutorials borde du nu ha en ganska bra förståelse för den grundläggande kodstrukturen i jQuery jQuery Tutorial - 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 någon 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 webbplatsproblem 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 det gäller en icke-funktionell bit kod är det mycket ... 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, rullar och alla de fina sakerna.

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 att "lyssna på", och när händelsen utlöses kan de reagera på något sätt.

Om du t.ex. trycker på din iPhone-skärm kommer du att skapa en enda "tap-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. Händelser 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. Det här behöver inte vara en specifik "knapp" - du kan bifoga en händelseloggare till någonting på skärmen, men som webbutvecklare behöver du självklart göra det intuitivt. Att skapa en pseudoknapp ur brevet är en dold i ett stycke text, men lite dumt.

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

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

Att lyssna på ett "klicka" -händelse på några element med klassen .clickme och logga sedan ett meddelande till konsolen som innehåller texten på det element som klickas på, skulle du göra:

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

Du borde kunna se att den åtgärd vi har inbäddat här är en anonym funktion som använder den här väljaren (som hänvisar till vilket objekt som jQuery för närvarande hanterar) - 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, eller hur?

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 troligt att du inte vill att den ursprungliga åtgärden ska utföras - i stället vill du göra lite snygg AJAX eller speciell 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").on("submit", function(event){ console.log(event); event.preventDefault(); return false; }); 

Några ändringar här - för det första fäster vi på inlämningsevenemanget istället för att klicka. Det här är mer lämpligt när det handlar om ett formulär eftersom användaren kan flikutrymme, slå in eller klicka på en inlämningsknapp - som alla skulle utlösa formens standardåtgärd. Vi överför även händelsesvariabeln till den anonyma funktionen, så vi kan hänvisa till händelsedata . Vi har sedan använt händelsen.preventDefault () i kombination med retur 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 ska 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 ett "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 mata 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.

 $(document).ready(function(){ $('#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 det moderna webben som låter dig ladda och skicka förfrågningar i bakgrunden utan att störa användaren.

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

Bildkredit: Pekskärm via Shutterstock