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

Как получить объект Event

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

<button id="elem">Элемент</button>
var elem = document.getElementById('elem');

elem.onclick = func;

function func() {
	
}

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

elem.onclick = func;

function func(event) {
	тут доступен объект event
}

Это работает только для функций, привязанных к какому-либо событию.

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

Координаты клика

Как уже упоминалось ранее, с помощью объекта Event можно получить координаты события, например в момент клика можно найти координаты этого клика.

Пусть в переменной event лежит объект Event. В этом случае координаты клика относительно окна браузера можно найти так: event.clientX для координаты по горизонтали и event.clientY для координаты по вертикали.

Рассмотрим пример: привяжем блоку событие onmousemove (срабатывает при движении мышкой по элементу), и будем показывать координаты курсора при движении мыши: 

#elem {
	border: 1px solid black;
	width: 200px;
	height: 200px;
}
<div id="elem"></div>
var elem = document.getElementById('elem');

elem.onmousemove = func;

function func(event) {
	this.innerHTML = event.clientX + ':' + event.clientY;
}

Поводите мышкой по элементу - вы увидите, как меняются координаты:

Кроме свойств clientX и clientY существуют также свойства pageX и pageY. Давайте посмотрим разницу между ними.

Как работают clientX и clientY: если у вас есть окно 1000 на 1000 пикселей, и мышь находится в центре, то clientX и clientY будут оба равны 500. Если вы затем прокрутите страницу по горизонтали или вертикали, не двигая курсор, то значения clientX и clientY не изменятся, так как отсчитываются относительно окна, а не документа.

Как работают pageX и pageY: если у вас есть окно 1000 на 1000 пикселей, и курсор находится в центре, то pageX и pageY будут равны 500. Если вы затем прокрутите страницу на 250 пикселей вниз, то pageY станет равным 750.

Таким образом pageX и pageY содержат координаты события с учетом прокрутки.

Тип события

Объект Event также содержит в себе тип события, к примеру для события onclick это click, для onmouseover это mouseover и так далее. Доступ к типу события можно получить так - event.type: 

<button id="elem">Элемент</button>
var elem = document.getElementById('elem');

elem.onclick = func;

function(event) {
	alert(event.type); //выведет 'click'
}

Элемент события

С помощью event.target можно получить элемент, в котором произошло событие. Зачем это нужно, если этот элемент содержится в this? Ответ на этот вопрос даст пример ниже.

Пусть у нас есть div, а внутри него абзац. Привяжем событие к диву, но кликнем по абзацу - в этом случае event.target будет содержать конечный тег, в котором случилось событие - то есть абзац, а не див. Убедимся в этом с помощью tagName: 

<div id="elem">
	<p>Абзац</p>
</div>
var div = document.getElementById('elem');

div.addEventListener('click', func);

function func(event) {
	var target = event.target;
	alert(target.tagName); //выведет 'p' - абзац
}

Нажатые клавиши

Давайте теперь будем получать нажатые клавиши. Это актуально для тех событий, в которых происходит работа с клавиатурой, например, в onkeypress, onkeydown, onkeyup.

Для получение нажатых клавиш следует использовать свойство event.keyCode. Оно, однако, возвращает не саму клавишу, а ее код. Этот код можно преобразовать в символ с помощью метода String.fromCharCode.

Рассмотрим пример: вводите текст в инпут и по мере ввода вы будете видеть код нажатой клавиши и саму клавишу: 

<input id="input">
<div id="result"></div>
var input = document.getElementById('input');
var result = document.getElementById('result');

input.onkeypress = func;

function func(event) {
	var code = event.keyCode;
	var key = String.fromCharCode(event.keyCode);
	result.innerHTML = 'Код: ' + code + ', клавиша' + key;
}

Введите текст в инпут:

Ctrl, Alt, Shift

Можно узнать, были ли нажаты в момент события клавиши Ctrl, Alt и Shift. Это делается с помощью свойств event.ctrlKey, event.altKey и event.shiftKey - они имеют значение true или false в зависимости от того, была ли нажата эта клавиша в момент события или нет.

В следующем примере при клике на кнопку будем выводить сообщение о том, была ли нажата одна из клавиш Ctrl, Alt или Shift: 

<input type="button" id="button" value="Нажмите на кнопку">
var button = document.getElementById('button');

button.addEventListener('click', func);
function func(event) {
	if (event.ctrlKey) {
		alert('нажат Ctrl');
	}
	if (event.altKey) {
		alert('нажат Alt');
	}
	if (event.shiftKey) {
		alert('нажат Shift');
	}
}

Нажмите на кнопку, зажав при этом Ctrl, Alt или Shift:

Отмена действия

Иногда с помощью JavaScript требуется отменить действие тега по умолчанию. К примеру, по нажатию на ссылку должно произойти некоторое действие, при этом перехода по ссылке не должно произойти. Сделать это можно двумя способами - все зависит от того, как привязать событие: через атрибут, типа onclick или через JavaScript.

Если событие привязывается через атрибут - отменить действие по умолчанию можно, если в конце атрибута написать return: false, вот так: onclick="какой-то код; return: false;".

Рассмотрим их действие на следующем примере: попробуйте перейти по ссылке или что-нибудь ввести в поле - у вас ничего не получится: 

<a href="/" onclick="return false;">ссылка</a>
<input onkeypress="return false;">

Результат выполнения кода:

ссылка

До return false может быть любой JavaScript код - он выполнится, но действие пользователя будет отменено.

А вот если событие привязывается через JavaScript - то его действие можно отменить с помощью объекта Event, вот так: event.preventDefault().

Давайте сделаем так, чтобы по клику на ссылку не происходило перехода на другую страницу: 

<a href="/" id="link">ссылка</a>
var link = document.getElementById('link');

link.addEventListener('click', func);

function func(event) {
	event.preventDefault();
	alert('Вы не можете перейти по этой ссылке!');
}

Результат выполнения кода:

ссылка

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Когда все решите - переходите к изучению новой темы.