События и обработчики событий

Основные события

Мышь

• click - одиночный клик левой кнопки мыши
• mousedown - нажатие кнопки мыши
• mouseup - отпускание кнопки мыши

Форма

• submit - момент отправки формы обработчику (если кнопка типа "submit")

Клавиатура

• keydown - момент нажатия клавиши, до момента отпускания
• keyup - момент отпускания клавиши
• keypress - нажатие клавиши на клавиатуре

Документ

• load - возникает после полного окончания загрузки ресурса (всех картинок, стиле и прочего)
• resize - изменение размеров окна браузера
• scroll - прокрутка страницы

Назначение обработчиков событий

1. Использование атрибута HTML

<button onclick="action()">Action</button>

function action() {
	console.log('Hello');
}

2. Использование свойства DOM-объекта

<button id="element">Action</button>

const element = document.querySelector('#element');

element.onclick = function() {
	console.log('Hello');
}

3. addEventListener

<button id="element">Action</button>

const element = document.querySelector('#element');

element.addEventListener('click', function() {
	console.log('Hello');
});

Keydown Move Cube (пример) (opens new window)