DOM

JAVASCRIPT JA DOM KOULUTUSTA VUONNA 2025!

Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi
IT-koulutuksen asiantuntijasi, Koulutus- ja konsultointipalvelu KK Mediat

DOM-tapahtumien kuuntelu ja käsittely JavaScriptillä

HTML-dokumenttiin voi liittää erilaisia tapahtumankuuntelijoita, joiden avulla sivusta saadaan interaktiivinen. Käytännössä tämä tarkoittaa, että tiettyjen käyttäjän toimien – kuten klikkauksen, näppäimen painalluksen tai lomakkeen lähetyksen – yhteydessä voidaan suorittaa haluttua JavaScript-koodia.

Tapahtumakuuntelijan lisääminen ja poistaminen

Yleisin tapa lisätä tapahtumankäsittelijä on käyttää addEventListener()-metodia.Esimerkiksi:


document.addEventListener('click', function () {
  console.log('Klikattu koko dokumentissa');
});

Tässä esimerkissä tapahtumankäsittelijä reagoi kaikkiin dokumentin alueella tapahtuviin klikkauksiin.

Tapahtumankuuntelijalle voi antaa myös nimetyn funktion, joka suoritetaan kun tapahtuma toteutuu. Tämä ratkaisu mahdollistaa tapahtumankuuntelijan poistamisen kutsumalla removeEventListener()-menetelmää sekä rinnakkaisten tapahtumankuuntelijoiden käytön. Esimerkiksi alla oleva rakenne luo vain kertaalleen tapahtuvan tapahtumankuuntelijan:


function doIt() {
    console.log ("tapahtuma");
    document.removeEventListener('click', doIt);
}

document.addEventListener('click', doIt);

Tapahtuman kupliminen

Kun tapahtuma, kuten hiiren klikkaus, tapahtuu jossain sivun elementissä, se ei jää vain siihen. Tapahtuma kuplii ylöspäin DOM-puussa. Tämä tarkoittaa, että vaikka käyttäjä klikkaisi painiketta, myös painikkeen sisältävä div, body ja lopulta document saavat tiedon tapahtumasta – ellei tapahtumaa erikseen pysäytetä.

Tapahtumakuplinta mahdollistaa tapahtumien käsittelyn yhdestä keskitetystä paikasta, kuten vanhemmasta elementistä (esimerkiksi

tai body). Tätä kutsutaan tapahtumadelegoinniksi. 

<body>
  >div>
    <button class="child">testi</button>
  </div>


document.querySelector("button").addEventListener("click", () => {
  console.log("Painiketta klikattu");
});

document.querySelector("div").addEventListener("click", () => {
  console.log("Diviä klikattu");
});

document.body.addEventListener("click", () => {
  console.log("Bodya klikattu");
});

</body>

//Kun käyttäjä klikkaa painiketta, tulosteeksi tulee:
//Painiketta klikattu  
//Diviä klikattu  
//Bodya klikattu

Tapahtuman kuplimisen estäminen

Jos haluat estää tapahtuman kulkemisen ylöspäin, voit käyttää metodia event.stopPropagation():


document.querySelector("button").addEventListener("click", (event) => {
  event.stopPropagation(); // Estää kuplinnan
  console.log("Painiketta klikattu (kuplinta pysäytetty)");
});
document.querySelector("div").addEventListener("click", () => {
  console.log("Diviä klikattu");
});

document.body.addEventListener("click", () => {
  console.log("Bodya klikattu");
});

Tällöin klikkauksen käsittely pysähtyy painikkeeseen, eikä etene ylemmille elementeille.

Tapahtuman kulkusuunta

Tapahtumilla on kaksi päävaihetta DOM-puussa liikkuessaan:

  • Capture-vaihe – tapahtuma kulkee ylhäältä (window/document) kohti kohde-elementtiä.
  • Bubbling-vaihe – tapahtuma nousee kohde-elementistä takaisin ylös DOM-puussa.

addEventListener()-menetelmän kolmas parametri määrittää kummassa vaiheessa tapahtumankuuntelija aktivoituu:

Jos useCapture-parametri on true, käsittelijä aktivoituu capture-vaiheessa (ennen kuin tapahtuma saavuttaa kohde-elementin).

Jos useCapture on false (tai jätetään pois), käsittelijä aktivoituu bubbling-vaiheessa (oletus).

Esimerkiksi oletuskäytös on todellisuudessa seuraavanlainen - viimeinen parametri jätetään kirjoittamatta koska sen oletusarvo on false: 


element.addEventListener('click', handler, false);

event.target vs event.currentTarget auttavat jäljittämään tapahtumankuplintaa

Kun tapahtuma kuplii, joskus haluat tietää missä toiminto oikeasti tapahtui (target) ja missä elementissä käsittelijä tällä hetkellä on (currentTarget).

event.target viittaa elementtiin, jossa tapahtuma alkoi (esim. nappi).

event.currentTarget viittaa elementtiin, jossa tätä tapahtumankäsittelijää ollaan suorittamassa (esim. div).

Esimerkiksi: 


document.querySelector('div').addEventListener('click', function (event) {
  console.log('target:', event.target);
  console.log('currentTarget:', event.currentTarget);
});

Tällä tiedolla on merkitystä kun käytetään nk. delegointia. Delegoinnissa liität tapahtumankuuntelijan johonkin ylempään elementtiin, kuten document tai body, ja tarkistat missä tapahtuma oikeasti tapahtui. Esimerkiksi näin:


document.addEventListener("click", function (event) {
  if (event.target.matches("button")) {
    console.log("Painiketta klikattu delegoiden");
  }
});

event.preventDefault() estää tapahtuman

preventDefault() estää oletustoiminnon, kuten linkin klikkauksen tai lomakkeen lähetyksen. Huomaa, että se ei estä tapahtuman kuplimista – siihen tarvitaan erikseen stopPropagation().


event.preventDefault();
event.stopPropagation();

Samankaltaiseen lopputulokseen pääsee myös palauttamalla tapahtumankäsitteljässä arvon "return false" - tämä myös estää oletustapahtuman, mutta ei poista tapahtumankuplintaa. Tämän ratkaisun käyttämistä kuitenkaan suositella, sillä se estää kaiken myöhemmän käsisttelyn.

Artikkelin tiedot

Otsikko: DOM-tapahtumien kuuntelu ja käsittely JavaScriptillä

Kuvaus: Perehdy DOMin tapahtumien käsittelyyn JavaScriptin kautta. Opi hyödyntämään kuuntelijoita, tapahtumien kuplintaa ja tapahtumien estämistä.

Julkaisija: Koulutus- ja konsultointipalvelu KK Mediat

Viimeksi päivitetty: