오늘 한 일

• facebookClone_node 프로젝트를 하면서 이벤트 핸들러에서 e.target와 this가 일치하지 않는 경우가 많아(event bubbling) this를 자주 사용했었다. 그러다 보니 익명 함수를 자주 선언하게 되고, 그러다 보면 PROBLEMS 창에 ESLINT의 주의 창이 한가득… 그러다가 Event.currentTarget을 알게되었다.

• Event.currentTarget Event Interface의 read-only property인 Event.currentTarget은 DOM 객체를 순회하는 이벤트의 현재 타겟을 가리킨다(식별). 이벤트가 직접적으로 발생한 element를 가리키는 Event.target과는 달리, Event.currentTarget은 현재 이벤트 핸들러가 부착된 element를 가리킨다. 따라서 이벤트 핸들러를 부착했으나 해당 이벤트가 자손/조상 element에서 발생해 전파되었을 때, event.target은 자손/조상 element를 가리키지만 event.currentTarget은 현재 이벤트를 처리하고 있는 element를 가리키게 된다.

  <div>
    <button>눌러보세요</button>
  </div>
  
  <script type="application/javascript">
    document.querySelector('div').addEventListener('click', (e) => {
      console.log(e.currentTarget.tagName === "DIV", e.target.tagName === "BUTTON");
      // button 클릭 시 true, true
    });
  </script>