Event-objektin perusteet JavaScriptissä

Tässä oppitunnissa opimme perusteet Event-objektin kanssa työskentelystä. Tämä objekti sisältää tietoa tapahtuneesta tapahtumasta. Esimerkiksi, jos elementtiä klikataan, voimme selvittää tämän klikkauksen koordinaatit, oliko Ctrl-, Alt- tai Shift-nappainta painettuna klikkauksen yhteydessä ja niin edelleen.

Katsotaan, kuinka saada Event-objekti. Oletetaan, että meillä on painike:

html<button id="elem">text</button>

Oletetaan, että tämän painikkeen klikkaaminen suorittaa tietyn funktion:

javascriptlet elem = document.querySelector('#elem');

elem.addEventListener('click', function() {

});

Liitetyn funktion sisällä on jo Event-objekti - emme vain vielä tiedä, kuinka se saadaan. Se saadaan seuraavalla tavalla: funktiomme määriteltäessä on välitettävä sille parametrina mikä tahansa muuttuja (yleensä event - mutta nimi voi olla mikä tahansa) ja tähän muuttujaan selain laittaa automaattisesti Event-objektin:

javascriptelem.addEventListener('click', function(event) {
  console.log(event); // näemme tapahtumaobjektin
});