Коварная война россии против Украины. Ориентировочные потери врага
(по состоянию на 29.05.2024)
505100
солдат
357
самолетов
326
вертолетов
7700
танков
14891
ББМ
13066
артиллерия
815
ПВО
1087
РСЗО
17796
машин
27
корабли и катера
Уроки JavaScript – Объект события (Event Object)
Опубликовано

Уроки JavaScript – Объект события (Event Object)

В предыдущей статье мы рассмотрели основные события в браузере. Сегодня мы расширим эту тему, и кратко рассмотрим Объект события (Event Object), который является одним из важных аспектов обработки событий.

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

Заметьте, что IE браузеры не передают этот объект событию, вместо этого вы должны получить доступ к нему как свойству глобального объекта window:

function firstEventHandler (e) {
 // обратите внимание на аргумент "e"
 // когда эта функция вызывается в результате совершения события, будет передан объект события
 // делаем "e" кросс-браузерным:
 e = e || window.event;
 // теперь можно спокойно ссылаться на "e" во всех современных браузерах
}
// связываем нашу функцию с событием здесь ...

 

 

Для того, чтобы проверить наличие объекта «e» (Объект события), мы используем логический оператор OR (ИЛИ), который в основном проверяет следующее: если e является «ложным» значением (null, undefined, 0 и т.д.), для e присвоить window.event; иначе используется e. Это быстрый и простой способ получить реальный объект события в кросс-браузерной среде. Если вам не нравится использование логических операторов, вы можете использовать условный оператор IF:

if (!e) {
  e = window.event;
}
// здесь не нужно ELSE условие, поскольку "e" уже будет определен в других браузерах

 

 

Некоторые из наиболее полезных команд и свойств этого объекта события, к сожалению, несогласованные в различных браузерах (а именно IE здесь больше всего выделяется). Например, отмена действия по умолчанию события может быть достигнуто с помощью метода preventDefault() Объекта события, но в IE это может быть достигнуто только с помощью свойства returnValue объекта. Итак, опять же, мы должны использовать оба варианта, чтобы охватить практически все браузеры:

function firstEventHandler(e) {
 e = e || window.event;
 // отменяем дефолтное (по умолчанию) действие для события:
 if (e.preventDefault) {
  e.preventDefault();
 } else {
  e.returnValue = false;
 }
}

 

 

Дефолтным действием события является то, что обычно происходит в результате совершения события. Когда вы нажимаете на ссылку, по умолчанию браузер переходит к адресу, указанному в атрибуте «href» этой ссылки. Но иногда нужно отключить действие по умолчанию.

Разногласия между returnValue и preventDefault, другие неудачные реализации свойств Объекта события требуют обязательного использования конструкций типа if else.

Многие популярные JavaScript библиотеки нормализуют объект события, то есть команды, такие как e.preventDefault, будут доступны в IE, хотя следует помнить, что иногда свойство returnValue все еще используется.

 

 

Распространение события

Распространение событий – это когда событие произошло, а потом оно затрагивает весь DOM снизу вверх. Первое, что нужно отметить, — не все события имеют такой эффект, но если они его имеют, то это выглядит примерно так:

  • Событие запускается на целевом элементе. Затем событие срабатывает на каждом родителе этого элемента – событие проходит через весь DOM, пока не достигнет верхнего элемента, например:
    • Состоялась событие click на теге <a>
    • Состоялась событие click на теге <p>
    • Состоялась событие click на теге <div>
    • Состоялась событие click на теге <body>
  • Эти события будут срабатывать в таком порядке, они не происходят все одновременно.

 

 

Это поведение может быть прекращено в любое время процесса. Если вам нужно, чтобы событие касалось абзаца (тега <p>), но не продвигалось дальше (до узла <body>), вы можете воспользоваться другим полезным методом, который содержится в Объекте события, stopPropagation:

function firstParagraphEventHandler(e) {
 e = e || window.event;
 // прерываем распространение события:
 if(e.stopPropagation) {
  e.stopPropagation();
 } else {
  e.cancelBubble = true; // IE
 }
}
// функция будет связана с событием click, используя нашу специальную функцию addEvent:
addEvent( document.getElementsByTagName('p')[0], 'click', firstParagraphEventHandler );

 

 

Делегирование события

Предположим, что у вас есть большая таблица с множеством строк данных. Привязка обработчика событий click к каждому отдельному элементу <tr> может иметь плохие последствия, и будет негативно влиять на производительность. Самым распространенным способом борьбы с этой проблемой является использование «делегирование событий». Делегирование событий описывает процесс применения обработчика событий к элементу контейнера, а затем использует его как основу для всех дочерних элементов. Тестируя свойство target (srcElement в IE) Объекта события, мы можем определить реальный элемент, который нажимается.

var firstTable = document.getElementById('big-table');
firstTable.onclick = function() {
 // заботимся о совместимости в браузерах:
 e = e || window.event;
 var targetNode = e.target || e.srcElement;
 // проверяем, был ли нажат тег TR:
 if ( targetNode.nodeName.toLowerCase() === 'tr' ) {
  alert ('Вы нажали на строке таблицы!');
 }
}

 

 

Делегирование события полагается на распространении событий. Приведенный выше код не будет работать, если распространение события остановилось до достижения узла <table>.

 

 

Вот и все на сегодня! Надеемся, что вы узнали что-то полезное сегодня. В следующих уроках мы продолжим детальное изучение языка программирования JavaScript.

 

 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *