웹 개발을 하다 보면 사용자가 특정 영역(예: 드롭다운 메뉴, 팝업, 알림창)의 바깥쪽을 클릭했을 때 해당 요소를 자동으로 닫아야 하는 경우가 매우 흔합니다. JavaScript를 활용하면 몇 줄의 코드만으로 이 기능을 간단하게 구현할 수 있습니다.
동작 원리
핵심 아이디어는 다음과 같습니다.
- 문서 전체(document)에 클릭 이벤트 핸들러를 등록합니다.
- 클릭 이벤트가 발생하면
e.target.id로 실제로 클릭된 요소를 확인합니다. - 클릭된 요소의 id가 대상 div의 id와 다르면, 즉 div 바깥을 클릭했다면
display: none;으로 설정해 화면에서 숨깁니다.
예제 코드
아래 예제를 실행한 뒤 div 바깥쪽을 클릭하면 해당 div가 사라지는 것을 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<script>
window.onload = function(){
var hideMe = document.getElementById('hideMe');
document.onclick = function(e){
if(e.target.id !== 'hideMe'){
hideMe.style.display = 'none';
}
};
};
</script>
<div id="hideMe">Click outside this div and hide it.</div>
</body>
</html>
코드 상세 설명
- window.onload: HTML 문서가 완전히 로드된 후에 스크립트가 실행되도록 보장하여, DOM 요소에 접근하기 전에 발생할 수 있는 오류를 방지합니다.
- document.getElementById('hideMe'): 숨기고 싶은 대상 div 요소를 가져옵니다.
- document.onclick: 페이지 어디를 클릭하든 이벤트가 감지되도록 문서 전체에 클릭 핸들러를 등록합니다.
- e.target.id !== 'hideMe': 클릭된 요소가 대상 div가 아닌 경우에만 숨김 처리를 실행합니다. div 내부를 클릭하면 그대로 유지됩니다.
- style.display = 'none': 요소를 화면에서 완전히 숨기고 차지하던 레이아웃 공간까지 제거합니다.
참고 사항
실무 환경에서는 addEventListener('click', ...) 방식을 사용하는 것이 더 권장됩니다. 여러 개의 이벤트 핸들러를 충돌 없이 등록할 수 있고, 필요할 때 removeEventListener로 제거할 수도 있기 때문입니다. 또한 div 내부에 자식 요소가 포함되어 있다면 e.target이 자식 요소를 가리킬 수 있으므로, closest() 메서드나 contains()를 함께 활용하면 더 안정적으로 구현할 수 있습니다.