Tangentbords- och mus-händelser gör det möjligt för utvecklare att fånga upp och reagera på användarinteraktioner. Genom att hantera användarinmatningar effektivt kan du tillhandahålla återkoppling, utföra specifika åtgärder eller förbättra den övergripande användarupplevelsen.

Tangentbordshändelser

Tangentbordshändelser utlöses när användare interagerar med tangentbordet. Det finns två huvudsakliga tangentbordshändelser:

I en texteditor eller något formulär där användare skriver är det vanligt att fånga vissa tangentkombinationer (t.ex. Ctrl + S för att spara, eller Ctrl + Z för att ångra). Låt oss skapa ett exempel där specifika tangenter loggas för att simulera genvägsdetektering i ett formulär.

I det här exemplet skriver användare i ett inmatningsfält, och skriptet fångar vanliga kortkommandon som Ctrl + S för att spara eller Ctrl + Z för att ångra en åtgärd.

Hantering av mus-händelser

Mus-händelser utlöses när användare interagerar med sin mus eller styrplatta. De vanligaste mus-händelserna är:

Vi skapar ett exempel där en tooltip visas när muspekaren hålls över en knapp.

Att erbjuda snabb, kontextuell information utan att överbelasta gränssnittet är ett vanligt användningsområde, vilket förbättrar användbarheten och vägleder användare genom komplexa gränssnitt.

Praktiskt exempel: Dubbelklicka för att redigera med spara-funktion

I många moderna webbapplikationer kan användare dubbelklicka för att redigera ett objekt (som att byta namn på en fil eller uppdatera en uppgift) och spara sina ändringar.

I detta exempel visas en paragraf med uppgiften initialt, som blir redigerbar vid dubbelklick och visar ett inmatningsfält samt en "Spara"-knapp. Användaren kan ändra uppgiften och klicka på "Spara" för att tillämpa ändringarna; denna lösning förhindrar oavsiktliga ändringar vid enkla klick. Efter att ha sparat visas ett statusmeddelande som bekräftar uppdateringen eller visar ett fel om inmatningen är tom.