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.


theTarget = event.target


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


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

Browser compatibility

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

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

Document Tags and Contributors

 Last updated by: cvrebert,