Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Oppiskele Työskentely Näppäimistö- ja Hiiritapahtumien Kanssa | Tapahtumien Käsittely ja Käyttäjävuorovaikutukset JavaScriptissä
Edistynyt JavaScript-Osaaminen

bookTyöskentely Näppäimistö- ja Hiiritapahtumien Kanssa

Näppäimistö- ja hiiritapahtumat mahdollistavat kehittäjille käyttäjän vuorovaikutusten tunnistamisen ja niihin reagoimisen. Käsittelemällä käyttäjän syötteitä tehokkaasti voidaan tarjota palautetta, suorittaa tiettyjä toimintoja tai parantaa kokonaisvaltaista käyttökokemusta.

Näppäimistötapahtumat

Näppäimistötapahtumat laukaistaan, kun käyttäjät käyttävät näppäimistöä. On olemassa kaksi ensisijaista näppäimistötapahtumaa:

Tekstieditorissa tai missä tahansa lomakkeessa, jossa käyttäjät kirjoittavat, on tavallista tunnistaa tietyt näppäinyhdistelmät (esim. Ctrl + S tallentamiseen tai Ctrl + Z kumoamiseen). Luodaan esimerkki, jossa tietyt näppäimet kirjataan simuloimaan pikanäppäinten tunnistusta lomakkeessa.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Tässä esimerkissä käyttäjät kirjoittavat syötekenttään, ja skripti tunnistaa yleiset pikanäppäimet, kuten Ctrl + S tallentamista varten tai Ctrl + Z toiminnon kumoamiseen.

Hiiritapahtumien käsittely

Hiiritapahtumat laukaistaan, kun käyttäjät ovat vuorovaikutuksessa hiiren tai kosketuslevyn kanssa. Yleisimmin käytetyt hiiritapahtumat ovat:

Luodaan esimerkki, jossa työkaluvihje näytetään, kun hiiri viedään painikkeen päälle.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Nopean, kontekstuaalisen tiedon tarjoaminen ilman käyttöliittymän kuormittamista on yleinen käyttötapaus, joka parantaa käytettävyyttä ja ohjaa käyttäjiä monimutkaisissa käyttöliittymissä.

Käytännön esimerkki: Kaksoisnapsautus muokkausta ja tallennusta varten

Monissa nykyaikaisissa verkkosovelluksissa käyttäjät voivat kaksoisnapsauttaa muokatakseen kohdetta (esimerkiksi tiedoston nimeäminen uudelleen tai tehtävän päivittäminen) ja tallentaa muutoksensa.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Tässä esimerkissä kappale näyttää aluksi tehtävän, joka muuttuu muokattavaksi kaksoisnapsautuksella, jolloin näkyviin tulee syöttökenttä ja "Tallenna"-painike. Käyttäjä voi muokata tehtävää ja napsauttaa "Tallenna" soveltaakseen muutokset; tämä estää vahingossa tapahtuvat muutokset yksittäisillä klikkauksilla. Tallennuksen jälkeen tilaviesti vahvistaa päivityksen tai näyttää virheen, jos syöte on tyhjä.

1. Mitä keydown-tapahtuma tekee?

2. Mikä hiiritapahtuma laukeaa, kun osoitin siirtyy elementin alueelle?

question mark

Mitä keydown-tapahtuma tekee?

Select the correct answer

question mark

Mikä hiiritapahtuma laukeaa, kun osoitin siirtyy elementin alueelle?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 3. Luku 6

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Awesome!

Completion rate improved to 2.22

bookTyöskentely Näppäimistö- ja Hiiritapahtumien Kanssa

Pyyhkäise näyttääksesi valikon

Näppäimistö- ja hiiritapahtumat mahdollistavat kehittäjille käyttäjän vuorovaikutusten tunnistamisen ja niihin reagoimisen. Käsittelemällä käyttäjän syötteitä tehokkaasti voidaan tarjota palautetta, suorittaa tiettyjä toimintoja tai parantaa kokonaisvaltaista käyttökokemusta.

Näppäimistötapahtumat

Näppäimistötapahtumat laukaistaan, kun käyttäjät käyttävät näppäimistöä. On olemassa kaksi ensisijaista näppäimistötapahtumaa:

Tekstieditorissa tai missä tahansa lomakkeessa, jossa käyttäjät kirjoittavat, on tavallista tunnistaa tietyt näppäinyhdistelmät (esim. Ctrl + S tallentamiseen tai Ctrl + Z kumoamiseen). Luodaan esimerkki, jossa tietyt näppäimet kirjataan simuloimaan pikanäppäinten tunnistusta lomakkeessa.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Tässä esimerkissä käyttäjät kirjoittavat syötekenttään, ja skripti tunnistaa yleiset pikanäppäimet, kuten Ctrl + S tallentamista varten tai Ctrl + Z toiminnon kumoamiseen.

Hiiritapahtumien käsittely

Hiiritapahtumat laukaistaan, kun käyttäjät ovat vuorovaikutuksessa hiiren tai kosketuslevyn kanssa. Yleisimmin käytetyt hiiritapahtumat ovat:

Luodaan esimerkki, jossa työkaluvihje näytetään, kun hiiri viedään painikkeen päälle.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Nopean, kontekstuaalisen tiedon tarjoaminen ilman käyttöliittymän kuormittamista on yleinen käyttötapaus, joka parantaa käytettävyyttä ja ohjaa käyttäjiä monimutkaisissa käyttöliittymissä.

Käytännön esimerkki: Kaksoisnapsautus muokkausta ja tallennusta varten

Monissa nykyaikaisissa verkkosovelluksissa käyttäjät voivat kaksoisnapsauttaa muokatakseen kohdetta (esimerkiksi tiedoston nimeäminen uudelleen tai tehtävän päivittäminen) ja tallentaa muutoksensa.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Tässä esimerkissä kappale näyttää aluksi tehtävän, joka muuttuu muokattavaksi kaksoisnapsautuksella, jolloin näkyviin tulee syöttökenttä ja "Tallenna"-painike. Käyttäjä voi muokata tehtävää ja napsauttaa "Tallenna" soveltaakseen muutokset; tämä estää vahingossa tapahtuvat muutokset yksittäisillä klikkauksilla. Tallennuksen jälkeen tilaviesti vahvistaa päivityksen tai näyttää virheen, jos syöte on tyhjä.

1. Mitä keydown-tapahtuma tekee?

2. Mikä hiiritapahtuma laukeaa, kun osoitin siirtyy elementin alueelle?

question mark

Mitä keydown-tapahtuma tekee?

Select the correct answer

question mark

Mikä hiiritapahtuma laukeaa, kun osoitin siirtyy elementin alueelle?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 3. Luku 6
some-alt