JQuery Tutorial (del 4)

Annons

Idag kommer vi att sparka upp ett hack och verkligen visa var jQuery lyser - evenemang. Om du följde tidigare tutorials bör du nu ha en ganska god förståelse av grundläggande kodstruktur för jQuery jQuery Tutorial - Komma igång: Basics & SelectorsFörra veckan talade jag om hur viktigt jQuery är för alla moderna webbutvecklare och varför det är fantastiskt. Den här veckan tror jag det är dags att vi blir smutsiga med lite kod och lärde oss hur ... Läs mer (och alla de hemska lockiga hängslen som följer med det), samt hur man hittar delar av DOM och några saker du kan göra för att manipulera dem Introduktion till jQuery (del 2): ​​Metoder och funktionerDetta är en del av en pågående introduktion av nybörjare till jQuery webbprogrammeringsserier. Del 1 omfattade grunderna för jQuery för hur du inkluderar det i ditt projekt och väljare. I del 2 fortsätter vi med ... Läs mer . Jag visade också hur du får åtkomst till utvecklare konsol i Chrome Ta reda på problem med webbplatsen med Chrome Developer Tools or Firebug

Om du har följt mina jQuery-tutorials hittills har du kanske redan stött på några kodproblem och inte vetat hur du fixar dem. När du står inför en icke-funktionell kodkod, ä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ändarinteraktioner - klicka, bläddra och allt det här snygga.

Vad är en händelse ändå?

För de som är nya i programmering som involverar 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 av någon annan process. Program väljer vilka händelser som ska ”lyssna på” och när den händelsen utlöses kan de reagera på något sätt.

Till exempel, genom att knacka på din iPhone-skärm genereras en enda "tap-händelse" med en x, y-koordinat för exakt var du tappade. 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 vissa åtgärder i enlighet därmed. Om det bara var en tom del av gränssnittet var inget kopplat till händelsen och så kommer ingenting att hända.

Att dra fingret över skärmen genererar ytterligare en 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 göra reagera på saker som händer.

Enkelt: Klicka

Det kanske lättaste evenemanget att lyssna på är klickhändelsen, som startas när en användare klickar på ett element. Detta behöver inte vara en specifik "knapp" - du kan ansluta en händelse lyssnar till något på skärmen, men som webbutvecklare måste du uppenbarligen göra det intuitivt. Skapa en pseudoknapp ur brevet en dold i ett stycke text är möjligt, men något dumt.

Metoderna för att ansluta en händelse lyssnare har ändrats avsevärt under åren då jQuery har utvecklats, men detta är den nuvarande accepterade metoden, med hjälp av på():

$(väljare).på(händelse,verkan);

Att lyssna efter en “klick”Evenemang på alla element i klassen .Klicka här, och loggar sedan ett meddelande till konsolen som innehåller text av det element som klickades på skulle du göra:

$ ( "Clickme "). På (" klick", function () { console.log ($ (this) .text ()); });

Du borde kunna se att åtgärden vi har inbäddat här är en anonym funktion som använder detta selector (som hänvisar till vilket objekt jQuery just nu har att göra med) - i det här fallet, det som klickades på. Vi extraherar sedan texten till det klickade objektet och loggar in det på konsolen. Lätt, eller hur?

Stoppa standardåtgärden:

Vid någon tidpunkt vill du bifoga till något som en länk eller formulärskicka-knapp som vanligtvis gör något annat. I vilket fall är det ganska troligt att du inte vill att den ursprungliga åtgärden ska utföras - istället vill du göra lite snyggt AJAX eller speciell jQuery-magi.

För att förhindra att standardåtgärden sker, har vi en praktisk metod som heter preventDefault. Självklart. Låt oss se hur det skulle fungera när vi hanterar en skicka-knapp för ett formulär

$ ("# myForm"). on ("skicka", funktion (händelse) { console.log (händelse); event.preventDefault (); returnera falskt; });

Några förändringar här - för det första kopplar vi till Skicka in händelse istället för klick. Detta är mer lämpligt när man hanterar ett formulär som användaren kan göra fliken-space, träffa stiga på, eller slå en Skicka in -knapp - som alla skulle utlösa formulärets standardåtgärd. Vi överför också 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 det bara händelsen till konsolen, men i verkligheten skulle du antagligen ha en AJAX-hanterare här, som vi kommer att ta itu med i nästa lektion.

Händelser kan också triggas av dig

I de senaste två exemplen använde vi on-metoden för att lyssna på en händelse, men du kan också manuellt trigga 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 är mer meningsfullt om vi tittar på fokushändelsen.

Fokus används vanligtvis med inmatningsfält för att avfyra ett meddelande när användaren klickar i rutan för att mata in text - ett instruktionsmeddelande i det format som ska användas, till exempel. Men du kan också använda det för att tvinga användaren till användarnamnfältet när sidan laddats - så att de omedelbart kan börja skriva in sina inloggningsuppgifter.

$ (dokument). redan (funktion () { $ ( "# Username'.focus (); });

Om du också hade anslutit en fokushändelse lyssnare till det användarnamnfältet, skulle det också utlösas när du tvingade fokus. Händelser kan därför både triggas och lyssnas på.

För nu, öva genom att ansluta till olika evenemang på sidan - du kan hitta en fullständig lista över alla händelser tillgängliga här - kom ihåg att använda preventDefault om det är en länk eller knapp, och se vilken utgång du får från konsolen om händelsesdata.

Jag lämnar det där idag när vi närmar oss slutet på denna miniserie av jQuery-tutorials. Du bör, i slutet av det, vara tillräckligt säker på att kasta lite jQuery på din sida och få den 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 störa användaren.

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

Bildkredit: Pekskärm via Shutterstock