На этом уроке мы рассмотрим для чего предназначен объект event и как его получить. А также познакомимся со свойствами и методами этого объекта.

Объект event предназначен для получения различной информации о событии в обработчике события. Т.е. позволяет получить элемент, который вызвал обработчик события; элемент, который сгенерировал событие; определить какая была нажата кнопка мыши (для событий связанных с мышью) и многое другое.

JavaScript - получение дополнительной информации о событии

Объект event в соответствии со стандартом всегда передаётся обработчику события через первый параметр.

element.addEventListener("click", myEvent, false);
function myEvent(event) {
  //переменная event будет содержать объект event
}

Можно и так:

element.addEventListener("click", function(event) {
  //переменная event будет содержать объект event
}, false);

В этом разделе мы рассмотрим свойства и методы объекта 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 - область цифровой панели, которая дублирует клавиши основной области для ввода цифр и арифметических операторов).
  • Например, при перемещении мыши (событие 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).

    1. Напишите код на языке JavaScript, который будет переключать отображение некоторого блока, если на него нажали левой кнопкой мыши. Т.е. если блок скрыт, то показать его. А если он отображается, то скрыть его.
    2. Напишите код на языке JavaScript, который будет скрывать блок, если на него нажали средней кнопкой мыши.