Event.target

A reference to the object that dispatched the event. It is different from event.currentTarget when the event handler is called during the bubbling or capturing phase of the event.

Syntax

theTarget = event.target

Example

The event.target property can be used in order to implement event delegation.

// Assuming there is a 'list' variable containing an instance of an HTML ul element.
function hide(e) {
  // Unless list items are separated by a margin, e.target should be different than e.currentTarget
  e.target.style.visibility = 'hidden';
}

list.addEventListener('click', hide, false);

// If some element (<li> element or a link within an <li> element for instance) is clicked, it will disappear.
// It only requires a single listener to do that

Specifications

Specification	Status	Comment
DOM The definition of 'Event.target' in that specification.	Living Standard
DOM4 The definition of 'Event.target' in that specification.	Recommendation
Document Object Model (DOM) Level 2 Events Specification The definition of 'Event.target' in that specification.	Recommendation	Initial definition

Browser compatibility

Compatibility notes

On IE 6-8 the event model is different. Event listeners are attached with the non-standard EventTarget.attachEvent method. In this model, the event object has a Event.srcElement property, instead of the target property, and it has the same semantics as event.target.

function hide(e) {
  // Support IE6-8
  var target = e.target || e.srcElement;
  target.style.visibility = 'hidden';
}

See also

• Comparison of Event Targets