Объект события

101

посл. ред. 18.09.2016

В обработчик события, установленный с помощью jQuery, передаётся объект события, который соответствует W3C стандарту. Данный объект и объект, создаваемый браузером, - это два разных объекта, хотя они очень похожи.

Объекты одного события, создаваемые разными браузерами, всегда имеют незначительные отличия. Использование же в jQuery собственного объекта события (одинакового во всех браузерах) обеспечивает кроссбраузерность скриптов.

Конструктор Event()

В jQuery для создания объекта события используется конструктор Event(). Вызов конструктора выполняется следующим образом:

jQuery.Event(имя_события[, свойства])

имя_события: Строка, содержащая название события.
свойства: Объект, значения свойств которого передаются в создаваемый объект события.

Вызов конструктора можно выполнять без оператора new. Пример использования:

<html>
<head>
  <title>Работа с событиями в jQuery</title>
  <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
  <button>Кнопка</button>
</body>
</html>
 
<script>
$('button').on('click', function(event) {
  alert(event.button);
});

/* Создание объекта события 'click' со свойством button = 2 */
var event = jQuery.Event('click', {button: 2});
/* Запуск созданного события */
$('button').trigger(event);
</script>

Свойства объекта события

В стандартном браузерном объекте события наличие или отсутствие свойств определяется типом события, например, свойство key доступно только в событиях клавиатуры. В jQuery объекты любых событий одинаковы и содержат одни и те же свойства, поэтому некоторые свойства могут иметь значение undefined.

Свойства объекта `event`

altKey: Была ли нажата клавиша Alt в момент срабатывания события. Имеет булевый тип.
bubbles: Будет ли событие всплывать. Имеет булевый тип.
button: Информация о кнопке мыши, вызвавшей событие.
buttons: Информация о всех нажатых кнопках мыши в момент срабатывания события.
cancelable: Можно ли отменить стандартные действия браузера. Имеет булевый тип.
changedTouches: Список объектов Touch, изменивших своё состояние в период от предыдущего Touch-события до текущего.
clientX: Горизонтальная координата указателя мыши на момент возникновения события. Координата отсчитывается относительно окна документа (относительно видимой области страницы).
clientY: Вертикальная координата указателя мыши на момент возникновения события. Координата отсчитывается относительно окна документа (относительно видимой области страницы).
ctrlKey: Была ли нажата клавиша Ctrl в момент срабатывания события. Имеет булевый тип.
currentTarget: Ссылка на текущий элемент DOM дерева, на котором в данный момент выполняется обработчик события. Для делегированных событий - это элемент, для которого делегируется обработчик.
data: Ссылка на данные, указанные при установке обработчика.
delegateTarget: Ссылка на элемент, на котором установлен выполняемый обработчик. Для неделегированных событий данное свойство равноценно currentTarget.
eventPhase: Стадия события: перехват, всплытие или стадия цели.
key: Информация о нажатой клавише.
metaKey: Была ли нажата клавиша Windows (для MacOS - Command) в момент срабатывания события. Имеет булевый тип.
namespace: Строка, содержащая пространство имён, указанное при установке обработчика.
pageX: Горизонтальная координата указателя мыши на момент возникновения события. Координата отсчитывается относительно всего документа, то есть эта координата не меняется при прокрутке страницы.
pageY: Вертикальная координата указателя мыши на момент возникновения события. Координата отсчитывается относительно всего документа, то есть эта координата не меняется при прокрутке страницы.
result: Последнее значение, возвращённое обработчиками текущего события.
screenX: Горизонтальная координата указателя мыши на момент возникновения события. Координата отсчитывается относительно экрана монитора.
screenY: Вертикальная координата указателя мыши на момент возникновения события. Координата отсчитывается относительно экрана монитора.
shiftKey: Была ли нажата клавиша Shift в момент срабатывания события. Имеет булевый тип.
target: Ссылка на целевой элемент.
targetTouches: Список объектов Touch, начавшихся на целевом элементе.
timeStamp: Точное время генерации события.
touches: Список всех объектов Touch, независимо от их состояния или целевого элемента.
type: Строка, содержащая название события (click, keypress и т.п.).
view: Ссылка на объект window, в котором произошло событие.

Методы объекта `event`

isDefaultPrevented(): Возвращает значение true, если ранее был вызван метод event.preventDefault(). В противном случае возвращает false.
isImmediatePropagationStopped(): Возвращает значение true, если ранее был вызван метод event.stopImmediatePropagation(). В противном случае возвращает false.
isPropagationStopped(): Возвращает значение true, если ранее был вызван метод event.stopPropagation(). В противном случае возвращает false.
preventDefault(): Отменяет стандартные действия браузера, выполняемые по умочанию.
stopImmediatePropagation(): Остановка распространения события на следующие элементы и отмена всех невыполненных обработчиков текущего элемента.
stopPropagation(): Остановка распространения события на следующие элементы. Обработчики текущего элемента выполняются полностью.

Если требуется получить доступ к другим свойствам и методам объекта события (не указанным выше), тогда можно воспользоваться браузерным объектом события. Он доступен в свойстве event.originalEvent.