자바스크립트 DOM 타겟 이벤트 메소드 활용하기

자바스크립트 DOM에서는 target 이벤트 메소드를 사용하여 이벤트가 발생하는 요소에 접근할 수 있습니다. 아래의 코드는 클릭 시 해당 이벤트를 수신한 클래스 이름을 출력합니다.

document.addEventListener('click', function myFunction(e) {
  console.log(e.target.getAttribute('class'));
})

또는 아래와 같이 target.nodeName을 통해 노드의 이름에 접근할 수도 있습니다. 이외에도 부모 노드(parentNode), 자식 노드 리스트(childNodes), 첫 번째 자식 노드(firstChild), 마지막 자식 노드(lastChild) 등에도 접근할 수 있습니다.

document.addEventListener('click', function myFunction(e) {
  console.log(e.target.nodeName);
})