Объект 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('Вы не можете перейти по этой ссылке!');
}
Результат выполнения кода: