JavaScript - Объект event

На этом уроке мы рассмотрим для чего предназначен объект 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, который будет скрывать блок, если на него нажали средней кнопкой мыши.


   JavaScript и jQuery 0    3636 0

Комментарии (4)

  1. abgar2000 # 0
    Доброе время суток.
    Имеется несколько кнопок с одним классом (несколько копий одной кнопки), запускающих, например, форму в окне.
    Как «цивилизованно» (на jQuery) отслеживать кнопу по которой кликнули, чтобы «сделать что-то разное», в зависимости от того, по какой кнопке кликнули? Прописывать if? Или можно реализовать через event?
    Спасибо.
    1. Александр Мальцев # 0
      Здравствуйте, abgar2000.
      Через объект 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>
      
    2. abgar2000 # 0
      Спасибо за разъяснение. Как, имея несколько кнопок, написать правильный код отлавливания конкретной кнопки? Как идентифицировать кликнутую кнопку (у всех один класс, но в разных местах страницы), на jQuery?
      1. Александр Мальцев # 0
        С помощью ключевого слова this:

        <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>
        

      Вы должны авторизоваться, чтобы оставлять комментарии.