노드가 다른 노드를 포함하고 있는지 확인하고 싶을 때 Node.contains를 사용한다. 클릭 위치에 따라서 레이어가 열리고 닫히는 동작을 제어하고 싶을 때 유용하게 사용할 수 있다.

버튼 클릭으로 레이어를 열고 레이어가 아닌 다른 곳을 클릭 했을 때 레이어를 닫게 하는 기능은 웹에서 많이 볼 수 있다. 여는 동작은 쉬운데 닫는 동작을 구현 할 때 사용자가 클릭하는 곳을 판단하는 부분이 까다로운 부분이다.

<button>Hello</button>
<modal>Hello, World!</modal>

<script>
	const button = document.querySelector('button');
	const modal = document.querySelector('modal');

	button.addEventListener('click', () => {
		// 버튼을 누를 때 레이어가 열리고 닫히는 동작을 토글한다.
		modal.classList.toggle('on');
	});

	document.documentElement.addEventListener('click', event => {
		if (button.contains(event.target) || modal.contains(event.target)) {
			// 버튼이나 모달을 클릭했을 때는 닫는 기능을 건너뛴다. 위의 토글만 작동한다.
			return;
		}

		modal.classList.remove('on');
	});
</script>

Hello Hello, World!

클릭 이벤트 핸들러에서 node.contains(event.target)를 사용해서 사용자가 클릭한 부분이 버튼이나 레이어 안인지를 파악할 수 있다.