JS 이벤트 위임

(코딩한 내용 중 일부)

.stage를 가진 stageElem를 선언하고, 클릭했을 때 doorHandler라는 event를 발생.
doorHandler event가 발생되면 타켓이 되는 targetElem 변수를 선언.
하지만 if문을 사용해서 이 event는 door-body 클래스를 가졌을 경우에만 작동하게 함.
door-body를 가졌을 때 클릭한 것의 parentNode(부모 요소)에 door-opened 클래스가 추가되게 함

 

<script>
		// 전역변수 사용 회피
		(function() {
			const stageElem = document.querySelector('.stage');

			// 이벤트 위임
			function doorHandler(e) {
				const targetElem = e.target;

				// door-body 클래스 일때만 작동하게 함
				if (targetElem.classList.contains('door-body')) {
					// 클릭한 것의 부모에 클래스를 추가하는 것
					targetElem.parentNode.classList.add('door-opened');
				}
			}
			stageElem.addEventListener('click', doorHandler);
		})();
</script>