Основы работы с объектом Event в JavaScript

В данном уроке мы с вами изучим основы работы с объектом Event. Данный объект содержит в себе информацию о произошедшем событии. К примеру, если по элементу был сделан клик, мы можем узнать координаты этого клика, была ли нажата клавиша Ctrl, Alt или Shift в момент клика и так далее.

Давайте посмотрим, как получить объект Event. Пусть у нас есть кнопка:

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

Пусть по клику на эту кнопку выполняется некоторая функция:

let elem = document.querySelector('#elem'); elem.addEventListener('click', function() { });

Внутри привязанной функции уже есть объект Event - мы просто пока еще не знаем, как его получить. Получается он следующем образом: нужно при объявлении нашей функции передать в нее параметром любую переменную (как правило, event - но название может быть любым) и в эту переменную браузер автоматически положит объект Event:

elem.addEventListener('click', function(event) { console.log(event); // увидим объект с событием });

Самостоятельно проделайте описанные манипуляции и выведите объект с событием в консоль. Изучите структуру этого объекта.