Johdanto 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 onfalse, eli kuunnellaan kuplintavaiheessa).
Click-tapahtumankuuntelija
Liitetään click-tapahtumankuuntelija painikkeeseen. Kun painiketta klikataan, se käynnistää hälytyksen.
index.html
index.css
index.js
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.css
index.js
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.css
index.js
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.css
index.js
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?
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
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.22Johdanto 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 onfalse, eli kuunnellaan kuplintavaiheessa).
Click-tapahtumankuuntelija
Liitetään click-tapahtumankuuntelija painikkeeseen. Kun painiketta klikataan, se käynnistää hälytyksen.
index.html
index.css
index.js
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.css
index.js
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.css
index.js
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.css
index.js
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?
Kiitos palautteestasi!
