Event.target

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

구문

const theTarget = someEvent.target

Value

EventTarget

예제

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);

명세

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

브라우저 호환성

BCD tables only load in the browser

호환성 참고

IE 6–8에서는 이벤트 모델이 다릅니다. 이벤트 리스너는 비표준 EventTarget.attachEvent() (en-US) 메서드로 연결됩니다.

이 모델에서 이벤트 객체는 Event.srcElement (en-US) 속성 (target 속성 대신)을 가지며 Event.target과 동일한 의미를 갖습니다.

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

같이 보기