Объект event

Когда происходит событие, браузер генерирует объект события(объект event) и передает его в обработчик ссылку на него. Для того, чтобы начать работать с этим объектом нужно указать его в параметрах обработчика.

Объект event позволяет получить дополнительную информацию о произошедшем событии:

event.type - сообщит нам тип произошедшего события: click, change, keydown

event.currentTarget - возвращает ссылку на объект, на котором в данный момент произошло событие.

В зависимости от того какое событие произошло в event'е могут быть какие-то специальные свойства. Например событие onclick передает в этот объект свойства event.clientX и event.clientY - координаты клика мыши относительно левого верхнего угла объекта, на который установлен обработчик.

Пример ниже будет выводить все рассмотренные свойства при клике на любую область экрана.

<div style="width:100%;height:100vh;background-color:mediumseagreen" id="elem">
</div>

<script>
  elem.onclick = function(event) {
    // вывести тип события, элемент и координаты клика
    alert(event.type + " на " + event.currentTarget);
    alert(event.clientX + ":" + event.clientY);
  }
</script>

Подробнее о различиях в объекте event для разных событий в следующем разделе

Практика:

1. При клике на экране выводим координаты клика
2. При клике перемещаем круг на заданную позицию(используем CSS и transition)
3. Пользователь нажимает клавишу. Вывести код клавиши на экран
4. Есть массив логинов и форма ввода логина. При вводе логина пользователем, проверяем свободен ли данный логин или нет
5. Делаем игру с управлением игроком стрелочками