JavaScript - Объект event

Александр Мальцев

24.08.2015

21K

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

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

Объект 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).

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

Если статья понравилась, то поделитесь ей в социальных сетях:

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

abgar2000

24 августа 2015, 01:26

Спасибо за разъяснение. Как, имея несколько кнопок, написать правильный код отлавливания конкретной кнопки? Как идентифицировать кликнутую кнопку (у всех один класс, но в разных местах страницы), на jQuery?

Александр Мальцев

24 августа 2015, 05:37

С помощью ключевого слова 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>

abgar2000

23 августа 2015, 01:03

Доброе время суток.
Имеется несколько кнопок с одним классом (несколько копий одной кнопки), запускающих, например, форму в окне.
Как «цивилизованно» (на jQuery) отслеживать кнопу по которой кликнули, чтобы «сделать что-то разное», в зависимости от того, по какой кнопке кликнули? Прописывать if? Или можно реализовать через event?
Спасибо.
1. Александр Мальцев
  
  23 августа 2015, 03:07
  Здравствуйте, abgar2000.
  Через объект event Вы можете только узнать больше информации о произошедшем событии. Полученная информация не даст Вам сделать «что-то разное». Т.е. чтобы сделать что-то разное нужно эту информацию с чем-то сравнивать, а для этого необходимо использовать конструкцию if.
  Ситуации, когда конструкцию if можно не использовать, если Вы хотите что-то сделать с самим элементом, или с его родителем или ребенком. Для этого с помощью объекта event Вы получаете элемент, который сгенерировал событие (event.target). Получив этот объект, вы можете изменить значение его атрибутов, изменить текст его ребёнка и т.п. Но если Вы хотите что-то сделать не связанное с этим объектом (или с его предками и потомками), то выполнить это можно только через условия.
  
  Например, если Вы хотите посмотреть всю информацию объекта event о произошедшем событии, то можно написать следующий код:
```

<button type="button" value="Значение">Текст кнопки</button>


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


<script>
  $(function() {
    $("button").click(function(event) {
      for (var property in event) {
        console.log(property+" : "+event[property]);
      }
    });
  });
</script>
```

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

JavaScript - Объект event

Для чего предназначен объект event, и как его получить

Свойства и методы объекта event

Задания

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