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: Palautefunktio, joka suoritetaan, kun tapahtuma laukaistaan;
• useCapture (valinnainen): Totuusarvo, joka ilmaisee, tuleeko tapahtuma kaapata capture- vai bubbling-vaiheessa (oletus on false, eli kuuntelu tapahtuu bubbling-vaiheessa).

Click-tapahtumankuuntelija

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

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, estäen lomakkeen oletusarvoisen lähetyskäyttäytymisen, jotta tiedot voidaan käsitellä JavaScriptillä.

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

Keypress-tapahtuma

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

Joka kerta, kun näppäintä painetaan syöttökenttään kirjoitettaessa, 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ä.

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