Event.target

Свойство target интерфейса Event является ссылкой на объект, который был инициатором события. Он отличается от Event.currentTarget, если обработчик события вызывается во время всплытия (bubbling) или захвата события.

Синтаксис

theTarget = event.target

Значение:

EventTarget

Пример

Свойство event.target может быть использовано для реализации делегирования событий.

// Создадим список
var ul = document.createElement('ul');
document.body.appendChild(ul);

var li1 = document.createElement('li');
var li2 = document.createElement('li');
ul.appendChild(li1);
ul.appendChild(li2);

function hide(e){
  // e.target ссылается на кликнутый <li> элемент
  // Он отличается от e.currentTarget который будет ссылаться на родительский <ul> в этом контексте
  e.target.style.visibility = 'hidden';
}

// Назначим обработчик к списку
// Он будет вызван когда кликнут на любой <li>
ul.addEventListener('click', hide, false);

Спецификации

Specification Status Comment
DOM
Определение 'Event.target' в этой спецификации.		 Живой стандарт
DOM4
Определение 'Event.target' в этой спецификации.		 Устаревшая
Document Object Model (DOM) Level 2 Events Specification
Определение 'Event.target' в этой спецификации.		 Устаревшая Первоначальное определение.

Поддержка браузеров

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Да) (Да) (Да) (Да) (Да)
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Да) (Да) (Да) (Да) (Да)

Примечания

В IE 6-8 модель событий отличается. Обработчики событий назначаются с помощью нестандартного EventTarget.attachEvent метода. При этом в объекте события есть свойство Event.srcElement, вместо target свойства, но по смыслу оно идентично event.target.

function hide(e) {
  // Поддержка IE 6-8
  var target = e.target || e.srcElement;
  target.style.visibility = 'hidden';
}

Смотрите также