JavaScript — Introduktion genom exempel

3.3 Tangenters händelser

För tangenter finns endast två händelser — en tangent trycks ner och en tangent släpps upp. Det finns också en del egenskaper i event-objektet, t.ex. för att avgöra vilken tangent det rör sig om. Detta exempel är uppdelat i tre delar:

1. Test av händelserna keydown och keyup samt vad egenskaperna e.code och e.key ger för resultat.
2. Användning av händelsen keyup på textfält.
3. Början på ett spel, där man kan vrida en bil åt vänster eller höger genom att trycka på två olika tangenter.

Sammanfattning

• Händelsehanterare för keydown eller keyup kan läggas på document. Då känner programmet av dessa händelser, oavsett var man tidigare klickat.
• Händelsehanterarna kan också läggas på ett enskilt element, såsom ett textfält. Då känner programmet endast av händelserna, om textfältet är i fokus och man skriver i det.
• Egenskapen e.code ger en kod för vilken tangent som trycktes ner, medan e.key ger en kod för vilket tecken som skrevs.

Egna övningar

Här följer ett förslag på några egna övningar. Öppna filen test.html och test.js och utför följande:

• Filerna innehåller det bildspel som funnits med i några tidigare exempel. Du ska nu lägga till kod, så att man kan använda tangenterna för att bläddra mellan bilderna:
  • Lägg till händelsehanterare, så att funktionerna prevImg och nextImg anropas då man trycker ner vänster respektive höger piltangent. Har du inga piltangenter på ditt tangentbord, väljer du två andra valfria tangenter.
  • Lägg också till kod, så att man hoppar till första eller sista bilden, om man samtidigt håller ner shift-tangenten, då man bläddrar vänster eller höger.