Объект Event

При возникновении какого-либо события на элементе страницы браузер автоматически создаёт объект, в котором содержится полезная информация о наступившем событии (например, свойство type указывает тип события). Данный объект передаётся запускаемому обработчику события в качестве первого аргумента функции.

Для доступа к объекту события функцию-обработчик следует назначать с указанием одного аргумента. В него будет передана ссылка на объект события.

При назначении через HTML-атрибут объект события доступен по ссылке event. Для однотипности кода лучше всегда использовать переменную event для объекта события.

В IE8- вместо передачи параметра обработчику создаёт глобальный объект window.event.
Универсальное решение для получения объекта события:

element.onclick = function(event) {
    event = event || window.event; 

// Теперь event - объект события во всех браузерах.
};

bubbles

Свойство bubbles указывает, является ли данное событие всплывающим внутри DOM.

Синтаксис

event.bubbles

Возвращаемое значение

Булево значение true, если событие является всплывающим внутри DOM.

Комментарии

Только некоторые события могут всплывать. У таких событий это свойство возвращает true. Вы можете использовать это свойство, чтобы проверить, может ли событие всплывать.

Совместимость с браузерами

Да	9,0	Да	Да	Да

cancelable

Свойство cancelable указывает, является ли событие отменяемым.

Синтаксис

event.cancelable

Возвращаемое значение

Булево значение true, если событие может быть отменено.

Совместимость с браузерами

Да	9,0	Да	Да	Да

clipboardData

Значением свойства clipboardData является объект, обеспечивающий доступ к системному буферу сохранения.

Синтаксис

event.clipboardData

Возвращаемое значение

объект, обеспечивающий доступ к системному буферу сохранения. Буфер сохранения поддерживает пять форматов хранения данных, которые в DHTML обозначаются так:

• "Text" - Текстовый формат
• "URL" - Формат URI
• "File" - Файловый формат
• "HTML" - Формат HTML
• "Image" - Формат графического образа

Этот объект не имеет свойств и поддерживает следующие методы:

Совместимость с браузерами

Да	6+	22+	Да	Да

currentTarget

Свойство currentTarget определяет текущий элемент DOM дерева, на котором в данный момент выполняется обработчик события.

Синтаксис

event.currentTarget

Возвращаемое значение

Ссылка на текущий зарегистрированный объект, на котором обрабатывается событие.

Комментарии

Фактически, currentTarget содержит ссылку на тот же элемент, что и this.

currentTarget используется, когда один и тот же обработчик события присваивается нескольким элементам.

Совместимость с браузерами

Да	9,0	Да	Да	Да

Пример

<style>
form { background-color: green; position: relative;
  width: 150px; height: 150px;
  text-align: center; cursor: pointer; }

div.bl { background-color: blue; position: absolute;
  top: 25px; left: 25px; width: 100px; height: 100px; }

p { background-color: red; position: absolute;
  top: 25px; left: 25px; width: 50px; height: 50px;
  line-height: 50px; margin: 0; }
</style>
<div style="line-height: 25px; font-size: 16px;">
 Клик выведет <code>event.target</code> и <code>event.currentTarget</code>:
 <form id="form">FORM
    <div class="bl">DIV
      <p>P</p>
    </div>
  </form>
</div>

<script>
var form = document.querySelector('form');
form.onclick = function(event) 
 { event.target.style.backgroundColor = 'yellow';

  alert("target = " + event.target.tagName + ", currentTarget=" + event.currentTarget.tagName);

  event.target.style.backgroundColor = '';
};
</script>

defaultPrevented

Свойство defaultPrevented содержит информацию о том, было ли отменено стандартное действие браузера, выполняемое по умолчанию.

Синтаксис

event.defaultPrevented

Возвращаемое значение

boolean-значение, информирующее о том, был ли вызван event.preventDefault() в текущем обработчике события:

• true - действие браузера было отменено.
• false - действие браузера не было отменено.

Совместимость с браузерами

Да	9,0	Да	Да	Да

eventPhase

Свойство eventPhase отображает текущую фазу процесса обработки события.

Синтаксис

event.eventPhase

Возвращаемое значение

Целое число, которое соответствует стадии обработки:

• 0 - никакое событие не обрабатывается.
• 1 - стадия перехвата.
• 2 - стадия цели.
• 3 - стадия всплытия.

Совместимость с браузерами

Да	9,0	Да	Да	Да

isTrusted

Свойство isTrusted содержится информация о том, кем вызвано событие.

Синтаксис

event.isTrusted

Возвращаемое значение

• true - событие вызвано действием пользователя или браузером.
• false - событие вызвано скриптом.

Совместимость с браузерами

46,0	9,0	Да	Нет	33,0

Пример

<style> #bt, .cb {background: #aaccaa} </style>
<button id="bt"  onclick="f(event)"> 
  Шелкни мышью и узнай свойство <b>isTrusted</b></button>
<br>
<button onclick="f2()"> 
  Имитировать щелчок мыши на первую <span class="cb">кнопку</span> 
</button>
<script>
function f(event) 
 { if ("isTrusted" in event) 
     { alert (event.type + '.isTrusted = ' + event.isTrusted); }
   else { alert ("Свойство isTrusted не поддердивается"); }
 }

function f2() { document.getElementById("bt").click(); } 
</script>

preventDefault()

Метод preventDefault() отменяет событие, если оно отменяемое, без остановки дальнейшего распространения этого события.

Синтаксис

event.preventDefault()

Комментарии

Отменить действия браузера по умолчанию можно простым вызовом "return false" в конце обработчика. Но это можно использовать только внутри обработчиков, установленных через HTML-атрибут или DOM-свойство. Если обработчик устанавливается с помощью метода addEventListener(), тогда вызов "return false" ни к чему не приведёт. Универсальным способом для отмены действий браузера по умолчанию является встроенный метод preventDefault().

Вызов preventDefault() во время любой стадии обработки события отменяет действия браузера. Действия назначенных обработчиков данный метод не отменяет.

Действия браузера можно отменить не для всех событий. Вызов preventDefault() на неотменяемом событии результата не даст.

Информацию о состоянии браузерных действий можно получить из булевых свойств: cancelable, defaultPrevented.

Пример

<input id="i" type="text" placeholder="Введите текст">

<script>
document.getElementById("i").onkeypress = 
  function(event) { event.preventDefault(); alert('Отменено'); }
</script>

В получившемся поле нельзя ввести текст, используя клавиатуру.

Совместимость с браузерами

Да	9,0	Да	Да	Да

В IE8- для отмены действия по умолчанию нужно назначить свойство event.returnValue = false.

event.preventDefault ? event.preventDefault() : (event.returnValue=false);

stopImmediatePropagation()

Метод stopImmediatePropagation() отменяет выполнение всех невыполненных обработчиков события, даже назначенных текущему элементу.

Синтаксис

event.stopImmediatePropagation()

Комментарии

Если одному элементу на одно событие назначено несколько обработчиков, то они выполняются в порядке назначения. Если один из них вызывает метод stopImmediatePropagation(), тогда оставшиеся обработчики не выполняются. Дальнейшее распространение события не происходит.

Метод stopImmediatePropagation() не отменяет действия браузера по умолчанию.

Пример

<form name="test">
    <input type="text" placeholder="Введите текст" onkeypress="alert('input')">
</form>

<script>
 document.forms.test.addEventListener('keypress', 
   function(event) { alert('form 1'); event.stopImmediatePropagation();}, 
   true);
document.forms.test.addEventListener('keypress', 
   function(event) { alert('form 2'); }, 
   true);
</script>

Первый обработчик элемента <form> на стадии перехвата отменяет выполнение последующих обработчиков события keypress, назначенных текущему элементу, а также предотвращает дальнейшее распространение события. Второй обработчик элемента <form> не выполняется. Действие браузера по умолчанию всё равно выполняется.

Совместимость с браузерами

Да	9,0	Да	Да	Да

stopPropagation()

Метод stopPropagation() для остановки выполнения события на текущем элементе.

Синтаксис

event.stopPropagation()

Комментарии

Данный метод отменяет выполнение обработчиков тех элементов, до которых событие не дошло. Однако, все обработчики текущего элемента будут выполнены даже после вызова stopPropagation().

Метод stopPropagation() не отменяет действия браузера по умолчанию.

Пример

<form name="test">
    <input type="text" placeholder="Введите текст" onkeypress="alert('input')">
</form>

<script>
 document.forms.test.addEventListener('keypress', 
   function(event) { alert('form 1'); event.stopPropagation();}, 
   true);
document.forms.test.addEventListener('keypress', 
   function(event) { alert('form 2'); }, 
   true);
</script>

Первый обработчик элемента <form> на стадии перехвата отменяет дальнейшее распространение события keypress. При этом второй обработчик элемента <form> всё равно выполняется. А также выполняется действие браузера по умолчанию.

Совместимость с браузерами

Да	9,0	Да	Да	Да

Для остановки всплытия в IE8- используется код event.cancelBubble=true.

event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true);

target

Свойство target содержит ссылку на тот элемент, на котором было вызвано событие.

Синтаксис

event.target

Возвращаемое значение

Ссылка на элемент, на котором было вызвано событие.

Комментарии

Значение target отличается от currentTarget, если обработчик выполняется на стадии перехвата или всплытия.

Свойство target широко используется. Когда имеется несколько однотипных элементов (например, элементы меню), устанавливается только один обработчик на родительский элемент. А с помощью свойства target определяется элемент, для которого должно выполниться событие.

Пример

<style>
 li {cursor:pointer;}
 li:hover {color:red}
</style>

<ul id="i">
 <li>lorem</li>
 <li>ipsum</li>
 <li>dolor</li>
 <li>sit</li>
</ul>

<script>
 var uList = document.getElementById('i');
uList.onclick = 
   function (event) { this.removeChild(event.target); }
</script>

В данном примере клик на любом элементе списка удаляет его. При этом скрипт использует всего один обработчик. Особенно это полезно, когда список элементов заведомо не известен, а создаётся динамически.

Совместимость с браузерами

Да	9,0	Да	Да	Да

Вместо target в IE8- используется srcElement

Если мы пишем обработчик, который будет поддерживать и IE8- и современные браузеры, то можно начать его так:

elem.onclick = function(event) 
  { event = event || window.event;
    var target = event.target || event.srcElement;
    ... }

timeStamp

Свойство timeStamp возвращает точное время, когда произошло событие

Синтаксис

event.timeStamp

Возвращаемое значение

Количество миллисекунд, прошедших с начала эпохи Unix (1 января 1970 года по Гринвичу).

Совместимость с браузерами

Да	9,0	Да	Да	Да

Пример

<p onclick="f(event)">Шелкни мышью и узнай сколько миллисекунд прошло с начала эпохи Unix.</p>
<p>Timestamp: <span id="demo"></span></p>
<script>
function f(event) 
 { document.getElementById("demo").innerHTML = event.timeStamp; }
</script>

type

Свойство type содержится название события (click, keypress и т.п.).

Синтаксис

event.type

Возвращаемое значение

Строка, представляющая тип события.

Пример

<html><body 
  onmousedown="myFunction(event)" 
  onmouseup="myFunction(event)" 
  onkeydown="myFunction(event)" 
  onkeyup="myFunction(event)">

<p>Нажмите любую клавишу или щелкните мышью в этом документе, чтобы узнать, какой тип события был вызван.</p>

<p>Event: <span id="demo"></span></p>

<script>
function myFunction(event) {
    var x = event.type;
    document.getElementById("demo").innerHTML = '<b>'+x+'</b>';
}
</script>
</body></html>