Event.target

The target property of the Event interface is a reference to the object onto which the event was dispatched. It is different from Event.currentTarget when the event handler is called during the bubbling or capturing phase of the event.

Syntax

var theTarget = event.target;

Value

EventTarget

Example

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

// Make a list
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 refers to the clicked <li> element
  // This is different than e.currentTarget which would refer to the parent <ul> in this context
  e.target.style.visibility = 'hidden';
}

// Attach the listener to the list
// It will fire when each <li> is clicked
ul.addEventListener('click', hide, false);

Specifications

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

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
targetChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9Opera Full support 7Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support

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