Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Johdanto Tapahtumiin ja Tapahtumankuuntelijoihin | Tapahtumien Käsittely ja Käyttäjävuorovaikutukset JavaScriptissä
Edistynyt JavaScript-Osaaminen

bookJohdanto Tapahtumiin ja Tapahtumankuuntelijoihin

Mitä tapahtumat ovat JavaScriptissä?

JavaScript tarjoaa mekanismeja näiden tapahtumien käsittelyyn ja tietyn koodin suorittamiseen niiden perusteella, mikä tekee verkkosovelluksestasi interaktiivisen ja dynaamisen.

Yleiset tapahtumatyypit

addEventListener()-funktion selitys ja tapahtumankuuntelijoiden liittäminen

Vastataksesi tapahtumiin JavaScriptissä, liität tapahtumankuuntelijan elementtiin. Yleisin tapa tehdä tämä on käyttää addEventListener()-funktiota, joka kuuntelee tiettyjä tapahtumia ja kutsuu funktiota, kun tapahtuma tapahtuu.

element.addEventListener('event', function, useCapture);
  • event: Tapahtumatyyppi, jota haluat kuunnella (esim. 'click', 'submit');
  • function: Takaisinkutsufunktio, joka suoritetaan, kun tapahtuma laukaistaan;
  • useCapture (valinnainen): Totuusarvo, joka ilmaisee, tuleeko tapahtuma kaapata kaappaus- vai kuplintavaiheessa (oletus on false, eli kuunnellaan kuplintavaiheessa).

Click-tapahtumankuuntelija

Liitetään click-tapahtumankuuntelija painikkeeseen. Kun painiketta klikataan, se käynnistää hälytyksen.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Tapahtumankuuntelija liitetään #myButton-elementtiin, ja kun käyttäjä napsauttaa painiketta, viestiruutu ilmestyy tekstillä "Button clicked!"

Submit-tapahtumankuuntelija

Lisätään tapahtumankuuntelija submit-tapahtumalle, joka estää lomakkeen oletusarvoisen lähetyskäyttäytymisen, jotta tietoja voidaan käsitellä JavaScriptillä.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Lomakkeen submit-tapahtumaan liitetty tapahtumankuuntelija estää oletuslähetyksen käyttämällä event.preventDefault(), jolloin mukautettu JavaScript voi käsitellä tiedot. Lähetyksen yhteydessä syötetty nimi haetaan ja näytetään kappaleessa, jonka tunniste on displayName.

Keypress-tapahtuma

Lisätään keypress-tapahtumankuuntelija syötekenttään. Kun näppäintä painetaan, se näytetään kappaleessa.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Joka kerta, kun näppäintä painetaan kirjoitettaessa syötekenttään, painettu näppäin kirjataan konsoliin.

Käytännön esimerkki: Lomakkeen validoinnin käsittely lähetyksen yhteydessä

Luodaan logiikka lomakkeen validointia varten ennen lomakkeen lähettämistä.

index.html

index.html

index.css

index.css

index.js

index.js

copy

submit-tapahtumakuuntelija varmistaa, ettei lomake lähetetä, jos vaaditut kentät ovat tyhjiä. Jos joko käyttäjätunnus- tai salasanakenttä on tyhjä, tapahtuman eteneminen estetään ja virheilmoitus näytetään.

1. Mikä on addEventListener()-metodin tarkoitus?

2. Mikä seuraavista EI ole kelvollinen tapahtumatyyppi addEventListener()-metodille?

question mark

Mikä on addEventListener()-metodin tarkoitus?

Select the correct answer

question mark

Mikä seuraavista EI ole kelvollinen tapahtumatyyppi addEventListener()-metodille?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 3. Luku 1

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

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

Suggested prompts:

What are some other common event types in JavaScript?

Can you explain how event propagation works?

How do I remove an event listener in JavaScript?

Awesome!

Completion rate improved to 2.22

bookJohdanto Tapahtumiin ja Tapahtumankuuntelijoihin

Pyyhkäise näyttääksesi valikon

Mitä tapahtumat ovat JavaScriptissä?

JavaScript tarjoaa mekanismeja näiden tapahtumien käsittelyyn ja tietyn koodin suorittamiseen niiden perusteella, mikä tekee verkkosovelluksestasi interaktiivisen ja dynaamisen.

Yleiset tapahtumatyypit

addEventListener()-funktion selitys ja tapahtumankuuntelijoiden liittäminen

Vastataksesi tapahtumiin JavaScriptissä, liität tapahtumankuuntelijan elementtiin. Yleisin tapa tehdä tämä on käyttää addEventListener()-funktiota, joka kuuntelee tiettyjä tapahtumia ja kutsuu funktiota, kun tapahtuma tapahtuu.

element.addEventListener('event', function, useCapture);
  • event: Tapahtumatyyppi, jota haluat kuunnella (esim. 'click', 'submit');
  • function: Takaisinkutsufunktio, joka suoritetaan, kun tapahtuma laukaistaan;
  • useCapture (valinnainen): Totuusarvo, joka ilmaisee, tuleeko tapahtuma kaapata kaappaus- vai kuplintavaiheessa (oletus on false, eli kuunnellaan kuplintavaiheessa).

Click-tapahtumankuuntelija

Liitetään click-tapahtumankuuntelija painikkeeseen. Kun painiketta klikataan, se käynnistää hälytyksen.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Tapahtumankuuntelija liitetään #myButton-elementtiin, ja kun käyttäjä napsauttaa painiketta, viestiruutu ilmestyy tekstillä "Button clicked!"

Submit-tapahtumankuuntelija

Lisätään tapahtumankuuntelija submit-tapahtumalle, joka estää lomakkeen oletusarvoisen lähetyskäyttäytymisen, jotta tietoja voidaan käsitellä JavaScriptillä.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Lomakkeen submit-tapahtumaan liitetty tapahtumankuuntelija estää oletuslähetyksen käyttämällä event.preventDefault(), jolloin mukautettu JavaScript voi käsitellä tiedot. Lähetyksen yhteydessä syötetty nimi haetaan ja näytetään kappaleessa, jonka tunniste on displayName.

Keypress-tapahtuma

Lisätään keypress-tapahtumankuuntelija syötekenttään. Kun näppäintä painetaan, se näytetään kappaleessa.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Joka kerta, kun näppäintä painetaan kirjoitettaessa syötekenttään, painettu näppäin kirjataan konsoliin.

Käytännön esimerkki: Lomakkeen validoinnin käsittely lähetyksen yhteydessä

Luodaan logiikka lomakkeen validointia varten ennen lomakkeen lähettämistä.

index.html

index.html

index.css

index.css

index.js

index.js

copy

submit-tapahtumakuuntelija varmistaa, ettei lomake lähetetä, jos vaaditut kentät ovat tyhjiä. Jos joko käyttäjätunnus- tai salasanakenttä on tyhjä, tapahtuman eteneminen estetään ja virheilmoitus näytetään.

1. Mikä on addEventListener()-metodin tarkoitus?

2. Mikä seuraavista EI ole kelvollinen tapahtumatyyppi addEventListener()-metodille?

question mark

Mikä on addEventListener()-metodin tarkoitus?

Select the correct answer

question mark

Mikä seuraavista EI ole kelvollinen tapahtumatyyppi addEventListener()-metodille?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 3. Luku 1
some-alt