Podstawy pracy z obiektem Event w JavaScript

W tej lekcji nauczymy się podstaw pracy z obiektem Event. Ten obiekt zawiera informacje o zaistniałym zdarzeniu. Na przykład, jeśli element został kliknięty, możemy poznać współrzędne tego kliknięcia, czy klawisz Ctrl, Alt lub Shift był wciśnięty w momencie kliknięcia i tak dalej.

Spójrzmy, jak uzyskać obiekt Event. Załóżmy, że mamy przycisk:

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

Załóżmy, że po kliknięciu na ten przycisk wykonywana jest jakaś funkcja:

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

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

});

Wewnątrz powiązanej funkcji już znajduje się obiekt Event - po prostu jeszcze nie wiemy, jak go uzyskać. Uzyskuje się go w następujący sposób: przy deklarowaniu naszej funkcji należy przekazać do niej jako parametr dowolną zmienną (zwykle event - ale nazwa może być dowolna) i do tej zmiennej przeglądarka automatycznie umieści obiekt Event:

elem.addEventListener('click', function(event) {
	console.log(event); // zobaczymy obiekt ze zdarzeniem
});

Samodzielnie wykonaj opisane manipulacje i wypisz obiekt ze zdarzeniem w konsoli. Przeanalizuj strukturę tego obiektu.