Tapahtumaolion Ymmärtäminen JavaScriptissä
Aina kun tapahtuma tapahtuu JavaScriptissä, event-objekti välitetään automaattisesti tapahtumankäsittelijälle. Tämä objekti sisältää tärkeitä tietoja tapahtumasta, kuten elementin, joka laukaisi sen (target), tapahtuman tyypin (type) sekä menetelmiä tapahtuman käyttäytymisen hallintaan, kuten preventDefault() ja stopPropagation().
Tapahtumaan liittyvien tietojen käsittely
event-objekti sisältää useita hyödyllisiä ominaisuuksia ja menetelmiä, joiden avulla voit tarkastella tapahtuman tietoja ja olla vuorovaikutuksessa sen kanssa.
target
target-ominaisuus viittaa elementtiin, joka laukaisi tapahtuman. Sen avulla voidaan selvittää, mihin elementtiin klikattiin, vietiin hiiri tai muuten vuorovaikutettiin.
index.html
index.css
index.js
event.target-ominaisuutta käytetään tunnistamaan tietty painike, jota napsautettiin, ja sen id näytetään kappaleessa, jonka ID on display.
type
type-ominaisuus ilmoittaa tapahtuman tyypin, joka tapahtui (esim. click, submit, keydown).
index.html
index.css
index.js
event.type näytetään kappaleessa palautteena, osoittaen että click-tapahtuma on tapahtunut. Lisäksi, kun painiketta klikataan, koko sivun taustaväri muuttuu lightblue-väriseksi.
preventDefault()-metodi tapahtumaobjektissa
preventDefault()-metodi estää elementin oletustoiminnon, kuten linkin siirtymisen toiselle sivulle tai lomakkeen lähettämisen.
index.html
index.css
index.js
Tässä preventDefault() estää oletustoiminnon (siirtymisen uudelle sivulle) linkkiä klikattaessa. Sen sijaan näytetään ilmoitus.
Käytännön esimerkki: Lomakkeen lähetyksen käsittely ja tapahtumaolion käyttö
Validointi lomakkeelle, estetään lähetys jos kentät ovat tyhjiä, ja näytetään lomakkeen tiedot sekä tapahtumaan liittyvät tiedot kuten target, type ja miten preventDefault() estää oletuslähetyksen.
index.html
index.css
index.js
Kun "Sign Up" -lomake lähetetään, tapahtumankuuntelija estää lähetyksen käyttämällä event.preventDefault(). Jos joko käyttäjätunnus- tai salasanakenttä on tyhjä, näytetään virheilmoitus; muussa tapauksessa näytetään onnistumisviesti, jossa näkyy lähetetty käyttäjätunnus. Lisäksi tapahtuman tiedot—kuten tyyppi, lomakkeen tunniste ja tieto siitä, estettiinkö oletustoiminto—näytetään omassa osiossaan. Lomake palautetaan tämän jälkeen uutta käyttöä varten.
1. Mitä tietoa event.target -ominaisuus tarjoaa?
2. Miksi käyttäisit event.preventDefault()-metodia lomakkeen lähettämistapahtumassa?
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Can you explain how to use event.target in a real example?
What other useful properties are available on the event object?
How does preventDefault() differ from stopPropagation()?
Awesome!
Completion rate improved to 2.22Tapahtumaolion Ymmärtäminen JavaScriptissä
Pyyhkäise näyttääksesi valikon
Aina kun tapahtuma tapahtuu JavaScriptissä, event-objekti välitetään automaattisesti tapahtumankäsittelijälle. Tämä objekti sisältää tärkeitä tietoja tapahtumasta, kuten elementin, joka laukaisi sen (target), tapahtuman tyypin (type) sekä menetelmiä tapahtuman käyttäytymisen hallintaan, kuten preventDefault() ja stopPropagation().
Tapahtumaan liittyvien tietojen käsittely
event-objekti sisältää useita hyödyllisiä ominaisuuksia ja menetelmiä, joiden avulla voit tarkastella tapahtuman tietoja ja olla vuorovaikutuksessa sen kanssa.
target
target-ominaisuus viittaa elementtiin, joka laukaisi tapahtuman. Sen avulla voidaan selvittää, mihin elementtiin klikattiin, vietiin hiiri tai muuten vuorovaikutettiin.
index.html
index.css
index.js
event.target-ominaisuutta käytetään tunnistamaan tietty painike, jota napsautettiin, ja sen id näytetään kappaleessa, jonka ID on display.
type
type-ominaisuus ilmoittaa tapahtuman tyypin, joka tapahtui (esim. click, submit, keydown).
index.html
index.css
index.js
event.type näytetään kappaleessa palautteena, osoittaen että click-tapahtuma on tapahtunut. Lisäksi, kun painiketta klikataan, koko sivun taustaväri muuttuu lightblue-väriseksi.
preventDefault()-metodi tapahtumaobjektissa
preventDefault()-metodi estää elementin oletustoiminnon, kuten linkin siirtymisen toiselle sivulle tai lomakkeen lähettämisen.
index.html
index.css
index.js
Tässä preventDefault() estää oletustoiminnon (siirtymisen uudelle sivulle) linkkiä klikattaessa. Sen sijaan näytetään ilmoitus.
Käytännön esimerkki: Lomakkeen lähetyksen käsittely ja tapahtumaolion käyttö
Validointi lomakkeelle, estetään lähetys jos kentät ovat tyhjiä, ja näytetään lomakkeen tiedot sekä tapahtumaan liittyvät tiedot kuten target, type ja miten preventDefault() estää oletuslähetyksen.
index.html
index.css
index.js
Kun "Sign Up" -lomake lähetetään, tapahtumankuuntelija estää lähetyksen käyttämällä event.preventDefault(). Jos joko käyttäjätunnus- tai salasanakenttä on tyhjä, näytetään virheilmoitus; muussa tapauksessa näytetään onnistumisviesti, jossa näkyy lähetetty käyttäjätunnus. Lisäksi tapahtuman tiedot—kuten tyyppi, lomakkeen tunniste ja tieto siitä, estettiinkö oletustoiminto—näytetään omassa osiossaan. Lomake palautetaan tämän jälkeen uutta käyttöä varten.
1. Mitä tietoa event.target -ominaisuus tarjoaa?
2. Miksi käyttäisit event.preventDefault()-metodia lomakkeen lähettämistapahtumassa?
Kiitos palautteestasi!
