event.target / event.currentTarget / event.currentTarget.[선택자]

토글버튼을 만들었는데 토글 열렸을시 영역 바깥쪽 클릭했을때도 닫히게 해야했다. 여기서 중요한 개념을 이해하게 되었다.
event.target 과 event.currentTarget의 차이점이다.
event.target은 마우스로 직접 찍은 현재 위치이다.
event.currentTarget은 이벤트가 생성된 위치이다.

console.log(bodyEvent.target);
console.log(bodyEvent.currentTarget); console.log(bodyEvent.currentTarget.querySelectorAll('.profileMenu')[0])

let bodyTarget = bodyEvent.target;
let tooltipTarget = bodyEvent.currentTarget.querySelectorAll('.profileMenu')[0];

    if ( isActive && (bodyTarget != tooltipTarget) && (bodyTarget != btnProfile) ) {
        return tooltipBox.classList.remove('active');
    } 

bodyEvent.currentTarget.querySelectorAll('.profileMenu')[0] 여기가 바로 토글되는 영역박스인데 여기를 이벤트가 발생했을때 구분되는 기준으로 삼았다.

하...이 개념 어렵다 나중에 다시 공부해야겠다 지금은 어렴풋이 이해했다

출처 : https://velog.io/@sa833591/%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%9C%84%EC%9E%84-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B2%84%EB%B8%94%EB%A7%81-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%BA%A1%EC%B2%98-%EB%93%B1