JavaScript event.target과 this 차이점, HTML dialog 클릭 이벤트 완벽 정리

JavaScript의 event.target, this, currentTarget의 차이점과 HTML dialog 클릭 이벤트 동작 원리를 자세히 설명합니다. dialog 여백 클릭 시 닫히는 문제 해결 방법과 이벤트 객체에서 ID를 추출하는 방법까지 실무 예제로 정리했습니다.

HTML의 <dialog>를 사용하다 보면 의도하지 않게 다이얼로그 내부의 여백을 클릭했는데도 창이 닫히는 문제를 자주 만나게 됩니다.

대부분의 경우 아래와 같은 코드가 원인입니다.

clickDialogHandler: function(event) {
    if (event.target == this) {
        event.target.close();
    }
}

 

처음 보면 단순한 코드처럼 보이지만 event.target, this, currentTarget이 각각 무엇을 의미하는지 이해하지 못하면 원인을 찾기 어렵습니다.

이번 글에서는 실제 개발 과정에서 자주 사용하는 예제를 통해 이벤트 객체의 동작 원리와 dialog가 닫히는 이유, 그리고 원하는 dialog만 제어하는 방법까지 자세히 정리해보겠습니다.

---

왜 dialog 내부를 클릭해도 닫힐까?

다음과 같이 이벤트를 등록했다고 가정해보겠습니다.

 

const dialog = document.querySelector('#pinDialog');

dialog.addEventListener('click', clickDialogHandler);

 

그리고 이벤트 핸들러는 다음과 같습니다.

 

function clickDialogHandler(event) {
    if (event.target == this) {
        this.close();
    }
}

 

이 코드의 의미는 다음과 같습니다.

• 클릭한 요소가 dialog 자신이면 닫기
• dialog 내부의 자식 요소를 클릭하면 닫지 않기

즉,

 

<dialog id="pinDialog">
    <div class="content">
        내용
    </div>
</dialog>

 

div를 클릭한 경우

event.target = div
this = dialog

 

조건은

 

event.target == this

 

가 거짓이므로 닫히지 않습니다.

---

dialog의 여백을 클릭한 경우

event.target = dialog
this = dialog

 

이번에는 둘이 동일하기 때문에

 

dialog.close();

 

가 실행됩니다.

그래서 dialog의 여백을 클릭하면 창이 닫히게 됩니다.

---

event.target과 this의 차이

많은 개발자가 처음 헷갈리는 부분입니다.

구분의미

event.target	실제로 클릭한 요소
this	이벤트가 등록된 요소
event.currentTarget	이벤트가 등록된 요소

예를 들어

 

<dialog id="dialog">
    <button id="btn">확인</button>
</dialog>

 

버튼을 클릭하면

 

console.log(event.target);

 

출력

<button id="btn">

 

반면

 

console.log(this);

 

출력

<dialog id="dialog">

 

즉,

• target은 실제 클릭한 객체
• this는 이벤트를 등록한 객체

입니다.

---

이벤트 객체에서 ID 추출하기

가장 간단한 방법은 다음과 같습니다.

 

console.log(event.target.id);

 

또는

 

console.log(this.id);

 

예를 들어

 

<dialog id="pinDialog">

 

이라면

 

function clickDialogHandler(event) {

    console.log(event.target.id);
    console.log(this.id);

}

 

출력 결과

pinDialog
pinDialog

 

버튼을 클릭했다면

 

<button id="btnConfirm">

 

출력은

btnConfirm
pinDialog

 

가 됩니다.

---

특정 dialog만 닫히지 않게 하기

dialog가 여러 개인 경우에는 ID로 분기하면 됩니다.

 

function clickDialogHandler(event) {

    if (this.id === 'signDialog') {
        return;
    }

    if (event.target === this) {
        this.close();
    }
}

 

이렇게 하면

signDialog

 

만 여백 클릭 시 닫히지 않습니다.

---

닫기 버튼에서만 dialog 닫기

실무에서는 이 방법을 가장 많이 사용합니다.

 

<dialog id="pinDialog">

    <div class="dialog-content">

        내용

        <button class="dialog-close">
            닫기
        </button>

    </div>

</dialog>

 

 

const dialog = document.querySelector('#pinDialog');

const closeBtn = dialog.querySelector('.dialog-close');

closeBtn.addEventListener('click', () => {
    dialog.close();
});

 

이 방식은 사용자가 의도적으로 닫기 버튼을 눌렀을 때만 dialog를 종료합니다.

---

dialog의 여백 클릭 문제 해결하기

dialog에 padding이 있는 경우에도 문제가 발생할 수 있습니다.

예를 들어

 

dialog {
    padding:24px;
}

 

이라면 padding 영역 역시 dialog의 일부이기 때문에

event.target = dialog

 

가 됩니다.

이 문제는 padding을 내부 요소로 이동하면 해결할 수 있습니다.

 

<dialog id="pinDialog">

    <div class="dialog-content">

        내용

    </div>

</dialog>

 

 

dialog{
    padding:0;
}

.dialog-content{
    padding:24px;
}

 

이렇게 하면 클릭 대상이 대부분 .dialog-content가 되어 의도하지 않은 닫힘을 줄일 수 있습니다.

---

이벤트 객체에서 selector 값을 얻을 수 있을까?

Chrome DevTools에서 이벤트를 확인하면 다음과 같이 표시되는 경우가 있습니다.

0
selector: "#x8"

 

이 값을 보고

 

event.selector

 

또는

 

event.target.selector

 

처럼 접근하려고 하면 값을 얻을 수 없습니다.

그 이유는 selector가 브라우저의 Event 객체 속성이 아니라 DevTools에서 이벤트 리스너를 표시하기 위해 사용하는 메타데이터이기 때문입니다.

즉,

selector

 

는 JavaScript에서 접근 가능한 속성이 아닙니다.

---

실제 이벤트 객체 확인하기

다음과 같이 출력해보는 것이 가장 정확합니다.

 

function clickDialogHandler(event) {

    console.log(event);

    console.log(event.target);

    console.log(event.currentTarget);

    console.log(this);

}

 

자주 사용하는 속성은 다음과 같습니다.

속성설명

event.target	실제로 클릭한 요소
event.currentTarget	이벤트가 등록된 요소
this	이벤트가 등록된 요소
event.target.id	클릭한 요소의 ID
event.target.className	클릭한 요소의 클래스
event.target.tagName	태그 이름

---

selector가 필요한 경우

DevTools에서 보이는

selector:"#x8"

 

대신 실제로는 다음과 같이 처리하는 것이 좋습니다.

 

if (this.id === 'x8') {

    return;

}

 

또는

 

if (event.target.matches('#x8')) {

}

 

matches()는 특정 CSS 선택자와 일치하는지 확인할 때 유용한 메서드입니다.

---

실무에서 추천하는 방법

여러 프로젝트를 진행해 보면 dialog는 다음과 같이 관리하는 것이 가장 안정적입니다.

• dialog의 여백 클릭으로 닫지 않는다.
• 닫기 버튼을 별도로 만든다.
• ESC 키로 닫을 수 있도록 한다.
• 필요한 경우에만 backdrop 클릭을 허용한다.
• dialog마다 ID로 동작을 분기한다.

이렇게 구현하면 사용자 경험도 좋아지고 유지보수도 훨씬 쉬워집니다.

---

FAQ

event.target과 currentTarget은 같은 값인가요?

아닙니다. event.target은 실제 클릭한 요소이며, event.currentTarget은 이벤트가 등록된 요소입니다.

---

this와 currentTarget은 같은 의미인가요?

일반 함수(function)로 등록한 이벤트 핸들러에서는 대부분 동일합니다. 다만 화살표 함수(=>)에서는 this가 다르게 동작하므로 event.currentTarget을 사용하는 것이 더 안전한 경우가 있습니다.

---

DevTools에서 보이는 selector를 JavaScript에서 사용할 수 있나요?

불가능합니다. 해당 값은 DevTools에서 제공하는 메타데이터이며 Event 객체의 속성이 아닙니다.

---

dialog 여백 클릭으로 닫히는 것을 막으려면?

가장 확실한 방법은 event.target === this 조건으로 close()를 호출하는 코드를 제거하거나, 닫기 버튼에서만 dialog.close()를 호출하도록 구현하는 것입니다.

---

마무리

event.target, this, event.currentTarget은 모두 이벤트 처리에서 중요한 역할을 하지만 의미가 서로 다릅니다. 특히 HTML <dialog>를 사용할 때는 클릭 대상이 어디인지 정확히 이해해야 의도하지 않은 닫힘을 방지할 수 있습니다.

실무에서는 닫기 버튼 중심의 제어, ID 기반 분기, matches() 활용, 그리고 event.currentTarget과 event.target의 차이를 명확히 이해하는 것이 유지보수성과 사용자 경험을 모두 높이는 방법입니다.