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:

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

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

let 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:

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

Tee kuvatut toimenpiteet itse ja tulosta tapahtumaobjekti konsoliin. Tutki tämän objektin rakennetta.