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:

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

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

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

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