JavaScript - Объект event
На этом уроке мы рассмотрим для чего предназначен объект event
и как его получить. А также познакомимся со свойствами и методами этого объекта.
Для чего предназначен объект event, и как его получить
Объект event
предназначен для получения различной информации о событии в обработчике события. Т.е. позволяет получить элемент, который вызвал обработчик события; элемент, который сгенерировал событие; определить какая была нажата кнопка мыши (для событий связанных с мышью) и многое другое.
Объект event
в соответствии со стандартом всегда передаётся обработчику события через первый параметр.
element.addEventListener("click", myEvent, false); function myEvent(event) { //переменная event будет содержать объект event }
Можно и так:
element.addEventListener("click", function(event) { //переменная event будет содержать объект event }, false);
Свойства и методы объекта event
В этом разделе мы рассмотрим свойства и методы объекта event
.
Общие свойства объекта event
:
- type - строка, содержащее имя события.
- target - DOM-элемент, который сгенерировал событие.
- currentTarget - DOM-элемент, который вызвал обработчик события.
- eventPhase - число, показывающее на каком этапе произошло событие (1 - этапе погружения (перехвата), 2 - на цели, 3 - на этапе всплытия).
- timestamp - число (дата), когда произошло событие
- bubbles - возвращает логическое значение, указывающее может ли данное событие всплывать
- defaultPrevented - проверяет можно ли вызвать метод
preventDefault()
для данного события. - view - возвращает ссылку на объект window, в котором произошло событие.
Методы объекта event
:
- preventDefault() - отменить стандартное действие браузера, если это конечно возможно.
- stopPropagation() - предотвратить всплытие события (пузырька)
Свойства объекта event
, предназначенные для получения дополнительной информации о событиях, связанных с клавиатурой и мышью.
- which (для мыши) - возвращает число, указывающее, какая кнопка мыши была нажата (1 - левая кнопка, 2 - средняя кнопка, 3 - правая кнопка). Это свойство в основном используется вместе с событием
mousedown
. Данное свойство может использоваться для получения дополнительной информации о событие, связанном с нажатием кнопки мыши. - button (для мыши) - возвращает число, указывающее, какая кнопка мыши была нажата. Данное свойство может использоваться для получения дополнительной информации о событие, связанном с нажатием кнопки мыши.
- clientX, clientY (для мыши) - возвращают информацию о положении курсора (
clientX
- горизонтальная координата,clientY
- вертикальная координата) относительно левого верхнего угла клиентской области. - screenX, screenY (для мыши) - возвращают информацию о положении курсора (
screenX
- горизонтальная координата,screenY
- вертикальная координата) относительно левого верхнего угла экрана. - detail (для мыши) - возвращает число, указывающее сколько раз была нажата кнопка мыши в некоторой области за короткий промежуток времени.
- altKey, ctrlKey, metaKey, shiftKey (для мыши и клавиатуры) - получение дополнительной информации о том была ли нажата соответствующая клавиша alt, ctrl, meta и shift в тот момент когда произошло событие.
- relatedTarget (для мыши) - возвращает элемент, который связан с элементом, сгенерировавшим события мыши.
Например, свойствоrelatedTarget
(для мыши) может быть использовано для получения дополнительной информации о событияхmouseover
илиmouseout
.
Для событияmouseover
: свойствоtarget
- указывает на элемент, который сейчас находится под курсором; а свойствоrelatedTarget
- на элемент с которого курсор пришёл.
Для событияmouseout
: свойствоtarget
- указывает на элемент с которого курсор пришёл; аrelatedTarget
(для мыши) - на элемент, который сейчас находится под курсором. - charCode (для клавиатуры) - возвращает код символа Unicode нажатой клавиши (для события
keypress
). Если данное свойство использовать для получения дополнительной информации о событияхkeydown
илиkeyup
, то оно всегда вернёт "0". - keyCode, which (для клавиатуры) - возвращает код символа Unicode (для события
keypress
) или код ключа Unicode (для событийkeydown
иkeyup
). - location (для клавиатуры) - возвращает число, указывающее на область клавиатуры или устройства в котором расположена нажатая клавиша (0 - основная область клавиатуры, 1 - область, в которой расположена левая клавиша CTRL или левая клавиша ALT, 2 - область, в которой расположена правая клавиша CTRL или правая клавиша ALT, 3 - область цифровой панели, которая дублирует клавиши основной области для ввода цифр и арифметических операторов).
- Напишите код на языке JavaScript, который будет переключать отображение некоторого блока, если на него нажали левой кнопкой мыши. Т.е. если блок скрыт, то показать его. А если он отображается, то скрыть его.
- Напишите код на языке JavaScript, который будет скрывать блок, если на него нажали средней кнопкой мыши.
Например, при перемещении мыши (событие mousemove
) по веб-странице, вывести координаты курсора в элемент, имеющий id="myP"
.
<p id="myP"></p> <script> document.addEventListener("DOMContentLoaded",function() { document.addEventListener("mousemove", function(event) { var myP = document.getElementById("myP"); var X = event.clientX; var Y = event.clientY; myP.textContent = "X = " + X + "; Y = "+ Y; }, false); },false); </script>
Если курсор находится над несколькими элементами одновременно, то его получает элемент, который расположен в DOM наиболее глубоко. Курсор может быть только над одним элементов - самым глубоким в DOM (и верхним по z-index).
Имеется несколько кнопок с одним классом (несколько копий одной кнопки), запускающих, например, форму в окне.
Как «цивилизованно» (на jQuery) отслеживать кнопу по которой кликнули, чтобы «сделать что-то разное», в зависимости от того, по какой кнопке кликнули? Прописывать if? Или можно реализовать через event?
Спасибо.
Через объект event Вы можете только узнать больше информации о произошедшем событии. Полученная информация не даст Вам сделать «что-то разное». Т.е. чтобы сделать что-то разное нужно эту информацию с чем-то сравнивать, а для этого необходимо использовать конструкцию if.
Ситуации, когда конструкцию if можно не использовать, если Вы хотите что-то сделать с самим элементом, или с его родителем или ребенком. Для этого с помощью объекта event Вы получаете элемент, который сгенерировал событие (event.target). Получив этот объект, вы можете изменить значение его атрибутов, изменить текст его ребёнка и т.п. Но если Вы хотите что-то сделать не связанное с этим объектом (или с его предками и потомками), то выполнить это можно только через условия.
Например, если Вы хотите посмотреть всю информацию объекта event о произошедшем событии, то можно написать следующий код: