EventTarget.addEventListner(), event.target, event.currentTarget에 대한 정리

EventTarget.addEventListener()

EventTarget의 addEventListener() 메소드는 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정한다.

여기서 지정한 이벤트란 'click', 'submit' 등등 매우 다양하다.

 

Element, Document, Window 그리고 생소한 XMLHttpRequest와 같이 이벤트를 지원하는 모든 객체를 대상으로 지정할 수 있다.

 

addEventListener()는 EventTarget의 주어진 이벤트 유형에,

EventListener를 구현한 함수 또는 객체를 이벤트 처리기 목록에 추가해 작동한다.

 

target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture]);
target.addEventListener(type, listener[, useCapture, wantsUntrusted ]); // Gecko/Mozilla only

• type
  case-sensitive로, 대소문자를 엄격하게 구분한다.
• listener
  지정한 type의 이벤트가 발생했을 때 Event 인터페이스를 구현하는 객체이다.
  EventListener 인터페이스 또는 JavaScript function을 구현하는 객체여야만 한다.
  
  EventListener 인터페이스
  

  buttonElement.addEventListener('click', {
    handleEvent: function (event) {
      alert('handleEvent 함수로 누름!');
    }
  });​

  이벤트 리스너 인터페이스는 EventTarget 객체로부터 발생한 이벤트를 처리하기 위한 객체이다.
• options
  이벤트 리스너에 대한 특성을 지정하는 옵션 객체이다.
  capture : EventTarget으로 전송하기 전에, 등록된 리스너로 이 타입의 이벤트의 전송여부를 나타내는 불린 값이다.
  즉, 이 옵션을 통해 리스너로 이벤트를 전송할 것인지 결정한다.
  
  once : 리스너를 추가한 후 한 번만 호출되어야 함을 나타내는 불린 값이다.
  true인 경우 호출할 때 리스너가 자동으로 삭제된다.
  
  passive : true인 경우, 리스너에서 지정한 함수가 preventDefault()를 호출하지 않음을 나타내는 불린 값이다.
  만약 preventDefault()를 호출하면 user agent(웹 맥락에서 브라우저를 의미)는 콘솔 경고를 생성하는 것 외의 작업은
  수행하지 않는다.

Event.Target

Event 인터페이스의 target 속성은 event가 전달한 객체에 대한 참조이다.

즉, 이벤트가 발생한 곳의 주소를 의미한다.

 

그렇다면 Event.currentTarget과 어떤 차이가 있을까?

 

Event.currentTarget

Event 인터페이스의 currentTarget는 읽기 전용 속성으로,

이벤트가 DOM을 통과할 때 이벤트의 현재 대상을 식별한다.

 

이벤트가 발생한 요소과 그 하위 요소가 될 수 있는 요소를 식별하는 Event.target과는 다르게 이벤트 핸들러가 연결된 요소만을 참조한다.

 

쉽게 말하면 Event.Target은 이벤트가 실제로 발생한 요소의 주소를 알려주고,

Event.currentTarget은 이벤트가 코드로 걸려있는 곳 즉, 이벤트가 바인딩된 요소의 주소를 알려준다는 차이가 있다.

 

출처

https://ygseo.tistory.com/94?category=988280 

Advanced Javascript and DOM Manipulation - Drum kit

https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

Event.currentTarget - Web APIs | MDN

https://developer.mozilla.org/ko/docs/Web/API/Event/target

Event.target - Web API | MDN