Объект Event (объект Событие) содержит в себе информацию о произошедшем событии. К примеру, если по элементу был сделан клик, мы можем узнать координаты этого клика, была ли нажата клавиша Ctrl, Alt или Shift в момент клика и другую информацию.
Как получить объект event
Пусть у нас есть элемент, по клику на который выполнится функция func:
Внутри привязанной функции уже есть объект event. Чтобы его получить необходимо передать ее в функцию как параметр, причем название может быть любым, например event.
Координаты клика
С помощью объекта Event можно получить координаты события, например в момент клика можно найти координаты этого клика.
Пусть в переменной event лежит объект Event. В этом случае координаты клика относительно окна браузера можно найти так: event.clientX для координаты по горизонтали и event.clientY для координаты по вертикали.
Рассмотрим пример. Создадим квадрат. Привяжем блоку событие onmousemove (срабатывает при движении мышкой по элементу), и будем показывать координаты курсора при движении мыши:
Координаты клика
Кроме свойств 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:
С помощью event.target можно получить элемент, в котором произошло событие. Зачем это нужно, если этот элемент содержится в this? Ответ на этот вопрос даст пример ниже.
Пусть у нас есть div, а внутри него абзац. Привяжем событие к диву, но кликнем по абзацу - в этом случае event.target будет содержать конечный тег, в котором случилось событие - то есть абзац, а не див. Убедимся в этом с помощью tagName на примере.
Нажатые клавиши
Давайте теперь будем получать нажатые клавиши. Это актуально для тех событий, в которых происходит работа с клавиатурой, например, в onkeypress, onkeydown, onkeyup.
Для получение нажатых клавиш следует использовать свойство event.keyCode. Оно, однако, возвращает не саму клавишу, а ее код. Этот код можно преобразовать в символ с помощью метода String.fromCharCode.
Рассмотрим пример: вводите текст в input и по мере ввода вы будете видеть код нажатой клавиши и саму клавишу:
Ctrl, Alt, Shift
Можно узнать, были ли нажаты в момент события клавиши Ctrl, Alt и Shift. Это делается с помощью свойств event.ctrlKey, event.altKey и event.shiftKey - они имеют значение true или false в зависимости от того, была ли нажата эта клавиша в момент события или нет.
Отмена действия
Иногда с помощью JavaScript требуется отменить действие тега по умолчанию. К примеру, по нажатию на ссылку должно произойти некоторое действие, при этом перехода по ссылке не должно произойти. Сделать это можно двумя способами - все зависит от того, как привязать событие: через атрибут, типа onclick или через JavaScript.
Если событие привязывается через атрибут - отменить действие по умолчанию можно, если в конце атрибута написать return: false, вот так: onclick="какой-то код; return: false;".
Рассмотрим действие на следующем примере, попробуйте перейти по ссылке или что-нибудь ввести в поле - у вас ничего не получится:
До return false может быть любой JavaScript код - он выполнится, но действие пользователя будет отменено.
А вот если событие привязывается через JavaScript - то его действие можно отменить с помощью объекта Event, вот так: event.preventDefault().
Пример:
В этом примере после клика на на ссылку не происходит перехода на другую страницу.