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.

// 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

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