• 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!

🌿 이벤트 캡처링

캡쳐링은 버블링과 반대로 상위에서 하위로 이벤트가 전파되는 단계입니다. 캡쳐링에 관한 코드를 발견하는 일은 거의 없지만, 발생하게 된다면 이 개념을 이해하고 있어야 이벤트 핸들링을 해줄 수 있기 때문에 캡쳐링과 버블링 두 개념 모두 알고 있도록 합시다!

const JS_로그인체크기능 = (event) => {
	event.stopPropagation()
	
	const 비밀번호 = prompt("로그인 후 이용해 주세요.")
	
	if(비밀번호 === '1234') {
		alert("민지님 반갑습니다. 즐거운 여행 되세요~")
		window.removeEventListener("click", JS_로그인체크기능, { capture: true })
	} else {
	alert("로그인에 실패하였습니다. 다시 시도해 주세요.")
	}
}
window.addEventListener("click", JS_로그인체크기능, { capture: true })

JS_로그인체크기능: 이벤트 캡처링을 통해 최상위 요소에서 클릭 이벤트를 감지하여 로그인 확인을 수행합니다.

위 코드에서 window.addEventListener에 { capture: true } 옵션을 추가하여 이벤트 캡처링을 활성화합니다. 이 옵션이 없으면 기본적으로 이벤트 버블링이 사용됩니다.

📝 실습 코드