--- title: Event.target slug: Web/API/Event/target tags: - 돔 - 레퍼런스 - 속성 - 이벤트 - 타겟 translation_of: Web/API/Event/target ---

{{ApiRef("DOM")}}

{{domxref("Event")}} interface의 target 속성은  event가 전달한 객체에 대한 참조입니다. 이는 이벤트의 버블링 또는 캡처 단계에서 이벤트 핸들러를 호출하는 {{domxref("Event.currentTarget")}}와 다릅니다.

Syntax

theTarget = event.target

Value

{{domxref("EventTarget")}}

Example

event.target 속성을 사용하여 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
{{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}} {{Spec2("DOM WHATWG")}}
{{SpecName("DOM4", "#dom-event-target", "Event.target")}} {{Spec2("DOM4")}}
{{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}} {{Spec2("DOM2 Events")}} Initial definition

Browser compatibility

{{Compat("api.Event.target")}}

Compatibility notes

On IE 6-8 the event model is different. Event listeners are attached with the non-standard {{domxref('EventTarget.attachEvent')}} method. In this model, the event object has a {{domxref('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