개요
웹 개발을 하다 보면 여러 개의 div 요소가 있을 때, 사용자가 클릭한 지점이 div 내부인지 외부인지 판단해야 하는 경우가 자주 발생합니다. 예를 들어 모달을 닫거나, 드롭다운 메뉴를 숨기거나, 특정 영역만 선택을 카운트하는 기능 등이 대표적입니다.
이런 조건은 문서 전체에 클릭 이벤트 리스너를 등록한 뒤, DOM의 contains() 메서드를 활용하면 간단하게 구현할 수 있습니다.
핵심 원리
구현 방식은 다음 두 가지 요소로 구성됩니다.
- 문서 레벨 이벤트 리스너:
document.addEventListener('click', 콜백함수)를 사용해 페이지 어디를 클릭하든 이벤트를 감지합니다. - contains() 메서드:
element.contains(event.target)을 호출하면 클릭된 요소(event.target)가 해당 element의 자손인지 여부를 불리언 값으로 반환합니다.
여러 div를 한 번에 검사할 때는 querySelectorAll()로 노드 리스트를 가져온 후, 배열의 find() 메서드와 결합하면 클릭 영역을 포함하는 div가 있는지 효율적으로 확인할 수 있습니다.
예제 코드
다음은 완성된 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="divDemo">
First Division
</div>
<div class="divDemo">
Second Division
</div>
</body>
<script>
document.addEventListener('click', callEventFuncion)
function callEventFuncion(event) {
var div = document.querySelectorAll('.divDemo');
var titleResult = document.querySelectorAll('.my-title');
var result = Array.apply(0, div).find((v) => v.contains(event.target));
if (result) {
console.log(" Incrementing Division Selection");
}
else {
console.log("Incrementing Element Only OutSide of DIV");
}
}
</script>
</html>
실행 방법
위 프로그램을 실행하려면 파일을 "index.html"과 같은 이름으로 저장한 후, Visual Studio Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 "Open with Live Server" 옵션을 선택하면 됩니다.
실행 결과
프로그램을 실행하면 다음과 같은 화면이 출력됩니다.
이후 div 영역을 클릭하면 div 선택 횟수가 증가하고, div 바깥 영역을 클릭하면 외부 클릭으로 처리됩니다.
케이스 1: div 내부 클릭
사용자가 div 영역을 클릭하는 경우입니다. 아래 스냅샷은 div 섹션을 두 번 클릭한 상황입니다.
이때 콘솔에는 다음과 같은 결과가 출력됩니다.
클릭 대상이 .divDemo 클래스를 가진 요소 내부에 포함되어 있으므로, find()가 해당 div를 반환하고 "Incrementing Division Selection" 메시지가 기록됩니다.
케이스 2: div 외부 클릭
이번에는 div 영역 바깥을 일곱 번 클릭한 상황입니다.
콘솔에는 다음과 같은 결과가 출력됩니다.
클릭된 요소가 어떤 div에도 포함되지 않으므로 find()는 undefined를 반환하고, else 분기의 "Incrementing Element Only OutSide of DIV" 메시지가 기록됩니다.
정리
이처럼 document에 클릭 이벤트 리스너를 등록하고 contains() 메서드로 클릭 대상의 포함 여부를 검사하면, 별도의 라이브러리 없이도 순수 JavaScript만으로 여러 div의 내부/외부 클릭 조건을 깔끔하게 처리할 수 있습니다. 모달 닫기, 외부 클릭 감지 등 다양한 UI 인터랙션에 응용해 보세요.