На этом уроке мы рассмотрим для чего предназначен объект 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).
<button type="button">Кнопка 1</button> <button type="button">Кнопка 2</button> <button type="button">Кнопка 3</button> <button type="button">Кнопка 4</button> <script> $(function() { $('button').click(function() { //скрыть кнопку на которую нажали //this - это кнопка на которую Вы нажали $(this).hide(); //или например можно изменить текст кнопки, на которую Вы нажали //$(this).text("Вы нажали на эту кнопку"); //или сделать что-то другое }); }); </script>Имеется несколько кнопок с одним классом (несколько копий одной кнопки), запускающих, например, форму в окне.
Как «цивилизованно» (на jQuery) отслеживать кнопу по которой кликнули, чтобы «сделать что-то разное», в зависимости от того, по какой кнопке кликнули? Прописывать if? Или можно реализовать через event?
Спасибо.
Через объект event Вы можете только узнать больше информации о произошедшем событии. Полученная информация не даст Вам сделать «что-то разное». Т.е. чтобы сделать что-то разное нужно эту информацию с чем-то сравнивать, а для этого необходимо использовать конструкцию if.
Ситуации, когда конструкцию if можно не использовать, если Вы хотите что-то сделать с самим элементом, или с его родителем или ребенком. Для этого с помощью объекта event Вы получаете элемент, который сгенерировал событие (event.target). Получив этот объект, вы можете изменить значение его атрибутов, изменить текст его ребёнка и т.п. Но если Вы хотите что-то сделать не связанное с этим объектом (или с его предками и потомками), то выполнить это можно только через условия.
Например, если Вы хотите посмотреть всю информацию объекта event о произошедшем событии, то можно написать следующий код:
<!--Кнопки--> <button type="button" value="Значение">Текст кнопки</button> <!--Вывести в консоль всю информацию о событии с помощью JavaScript--> <script> document.addEventListener("DOMContentLoaded",function() { var buttons = document.getElementsByTagName("BUTTON"); //подписываем все кнопки на события for (var i=0; i<elements.length; i++) { elements[i].addEventListener("click", myEvent, false); } //функция, которая будет выводить всю информацию в консоль браузера function myEvent(event) { for (var property in event) { console.log(property+" : "+event[property]); } } }); </script> <!--Вывести в консоль всю информацию о событии на jQuery--> <script> $(function() { $("button").click(function(event) { for (var property in event) { console.log(property+" : "+event[property]); } }); }); </script>