JavaScript

JAVASCRIPTIIN LIITTYVÄÄ KOULUTUSTA VUONNA 2025!

Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi heti! Koulutuksen järjestää asiantuntijasi Koulutus- ja konsultointipalvelu KK Mediat.

Tapahtumiin reagoiminen JavaScriptissä

HTML:n ja JavaScriptin välinen tapahtumien sitominen voidaan tehdä kahdella tavalla: :

Sisäiset tapahtuma-attribuutit ovat helppoja ja nopeita, mutta niiden käyttö voi tehdä koodista sekavaa ja hankalasti ylläpidettävää. Tapahtumankuuntelijat pitävät JavaScriptin erillään HTML:stä ja tarjoavat joustavuutta, mutta niiden käyttöönotto vaatii enemmän koodia ja voi olla haastavampaa aloittelijoille.

HTML:n tapahtuma-attribuuttien hyödyntäminen

Useimmat HTML-elementit tarjoavat mahdollisuuden määrittää nk. tapahtuma-attribuutteja. Tätä piirrettä hyödyntämällä on mahdollisuutta havaita esimerkiksi hiiren klikaukset, lomakkeen lähettämiset, näppäimistön painallukset sekä vuorovaikutus käyttäjän kanssa hyvin yksinkertaisesti.

Tapahtumat määritellään HTML-elementeissä käyttäen erityistä tapahtuma-attribuuttia, ja tapahtuman syntaksi näyttää seuraavalta: 


<elementti tapahtumaAttribuutti="arvo">... </elementti>

Alla oleva esimerkki liittää onclick-tapahtuman HTML-lomakkeen input-elementtiin. Kun käyttäjä klikkaa painiketta, suoritetaan checkMe-funktio, jolle annetaan parametrina lomake-olio: 


<input type="button" onclick="checkMe(this.form);">

Mobiililaitteilla tämä voidaan korvata kosketustapahtumalla: 


<input type="button" ontouchstart="checkMe(this.form);">

Tapahtumankuuntelijat tyypeittäin

HTML tukee useita tapahtumatyyppejä eri päätelaitteille. Seuraavassa listauksessa on joitakin yleisimpiä HTML5-standardin mukaisia tapahtumatyyppejä:

Ikkunoihin (tai kehyksiin) kohdistuvat tapahtumat: 


onload; sivun latautuminen
onunload; sivulta poistuminen

Lomake-elementteihin liittyvät tapahtumat: 


onblur; kursorin poistuminen
onchange; lomakkeen kentän muutos
onfocus; fokuksen saaminen
onselect; lomakkeen kentän joutuminen valituksi
onsubmit; lomakkeen lähettäminen
onreset ; lomakkeen tyhjennys

Näppäimistötapahtumat


onkeydown; kun näppäin on alhaalla
onkeypress; kun näppäintä painetaan
onkeyup; kun näppäin vapautetaan

Näppäimistötapahtumat liittyvät fyysisen näppäimen painamiseen tai vapauttamiseen, ja niitä ei voi liittää kaikkiin HTML-elementteihin.

Hiiren tapahtumat


onclick; hiiren klikkaus
ondblclick; hiiren kaksoisklikkaus
onmousedown; kun hiiren painike on alhaalla
onmousemove; kun hiiri liikkuu elementin yllä
onmouseout; kun hiiri poistuu elementin yltä
onmouseover; hiiren liikkuminen elementin yllä
onmouseup; kun hiiren painike vapautuu

Hiiren tapahtumat ovat yleisiä käyttäjän interaktiotapahtumia. Nämä eivät myöskään ole käytettävissä kaikissa elementeissä.

Mobiililaitteiden kosketustapahtumat


ontouchstart: Kosketuksen alku
ontouchend: Kosketuksen päättyminen
ontouchmove: Kosketuksen liike (kosketuksen seuraaminen)
ontouchcancel: Kosketuksen peruminen
ontap: Yksinkertainen kosketus, joka vastaa klikkausta

Kosketustapahtumat ovat keskeisessä roolissa mobiiliystävällisten verkkosivustojen ja sovellusten kehittämisessä. On hyvä ymmärtää, että täyden laitetuen saamiseksi elementillä voi joskus olla useita rinnakkaisia tapahtumankuuntelijoita - esimerkiksi onclick ja on ontap.

Palautusarvon määrittäminen tapahtumalle - ja tapahtuman peruminen

Joidenkin tapahtumien yhteydessä halutaan määrittää palautusarvo return-rakenteellla. Tässä on kuitenkin riskin paikka, sillä jos palautusarvoksi annetaan true, tapahtuma toteutetaan ja jos palautusarvoksi annetaan false, tapahtuma estetään.

Esimerkiksi lomakkeen lähettämisen voi vahingossa tai tarkoituksella toteuttaa seuraavanlaisella koodilla: 


<form action="kasittele.asp" 
   onSubmit="if (lomake.nimi.length != 0){return true;} else {return false;}">

Käytännön kannalta on kuitenkin suositeltavaa välttää return false komennon käyttämistä tähän käyttötarkoitukseen. Jos esimerkiksi lomakkeen lähettämisen (tai minkä tahansa muun tapahtuman) haluaa perua, JavaScriptin oliomalli tarjoaa Event-olioon liitetyn menetelmän preventDefault(). 


<form action="kasittele.asp" 
  onSubmit="if (lomake.nimi.length != 0){return true;} else {event.preventDefault();}">

EventListeners: Tapahtumien käsittely puhtaalla JavaScriptillä

eventListener-menetelmä on moderni ja suositeltava tapa liittää tapahtumia HTML-elementteihin. Se tarjoaa joustavuutta ja eristää JavaScriptin HTML:stä, mikä tekee koodista puhtaampaa ja helpommin hallittavaa. Tämä menetelmä mahdollistaa myös useiden tapahtumien liittämisen samaan elementtiin ilman, että vanhat tapahtumat korvataan.

AddEventListererin perussyntaksi

addEventListener()-metodin syntaksi on seuraava:


element.addEventListener(event, function, useCapture);

Edellä event on tapahtuman nimi (esim. click, keydown, load, touchstart), jolla tapahtumankuuntelija laukeaa. function määrittää mikä koodi suoritetaan tapahtuman aikana, ja optionaalinen useCapture määrittää missä elinkaaren vaiheessa tapahtumaan tulisi reagoida. 


<button id="myButton">Klikkaa minua</button>


document.getElementById("myButton").addEventListener("click", function() {
    console.log("Painiketta on klikattu!");
});

document.getElementById("myButton").addEventListener("mouseover", function() {
    console.log("Hiiri liikkuu painikkeen päällä!");
});

Tapahtumankuuntelijan poistaminen

Jos haluat poistaa tietyn tapahtumakuuntelijan myöhemmin, voit käyttää removeEventListener-metodia. Alla olevassa esimerkissä painike reagoi hiiren klikkiin vain yhden kerran: 



function handleClick() {
    alert("Klikattu!");
}

button.addEventListener("click", handleClick);

// Tapahtuman poisto
button.removeEventListener("click", handleClick);

Artikkelin tiedot

Otsikko: Tapahtumiin reagoiminen JavaScriptissä

Kuvaus: Opi käsittelemään tapahtumia, kuten hiiren klikkauksia, näppäimistötoimintoja, lomakkeen lähetyksiä ja kosketustapahtumia JavaScriptin avulla.

Julkaisija: Koulutus- ja konsultointipalvelu KK Mediat

Viimeksi päivitetty: