Event.target

Властивість target інтерфейсу Event є посиланням на об'єкт який відправив подію. Він відрізняється від Event.currentTarget (en-US) коли обробник події викликається в фазі спливання або фіксації події.

Синтаксис

var theTarget = event.target;

Приклад

Властивість 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
The definition of 'Event.target' in that specification.		 Living Standard
DOM4
The definition of 'Event.target' in that specification.		 Obsolete
Document Object Model (DOM) Level 2 Events Specification
The definition of 'Event.target' in that specification.		 Obsolete Initial definition

Сумісність з браузерами

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 Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

Нотатки про сумісність

В браузерах IE 6-8 використовується інша модель подій. Слухачі подій приєднуються з використанням нестандартного методу EventTarget.attachEvent (en-US). В цій моделі, об'єкт події має Event.srcElement (en-US) властивість, замість властивості target, і воно має ту ж саму семантику як event.target.

function hide(e) {
  // Підтримка IE6-8
  var target = e.target || e.srcElement;
  target.style.visibility = 'hidden';
}

Читати також