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

🌿 stopPropagation

stopPropagation은 자바스크립트에서 이벤트가 부모 요소로 전파되는 것을 막는 함수입니다. 이 함수는 이벤트 버블링을 중단시키는데 사용됩니다.

이벤트 버블링이란, 한 요소에서 이벤트가 발생하면 그 이벤트가 해당 요소의 부모 요소로 전파되고, 다시 그 부모의 부모 요소로 계속 전파되는 현상을 말합니다. stopPropagation을 사용하면 이 전파 과정을 멈출 수 있습니다.

const JS_확대하기기능 = () => {
	document.getElementById("HTML_이미지사진").style = "width: 100vw; height: 100vh;";
}

const JS_좋아요기능 = (event) => {
	event.stopPropagation(); // 부모태그로 클릭이벤트 전파(Propagation)를 중단(Stop)함 => 부모의 onclick인 JS_확대하기기능() 실행막음
	alert("좋아요가 +1 올라갔습니다.");
}

<a href="./01-event-bubbling2-prevent-default-detail.html">
	<div class="CSS_이미지사진">
		<button onclick="JS_삭제하기기능(event, 1)">1번 삭제</button>
	</div>
</a>

이벤트 버블링과 stopPropagation의 역할:

• 버튼을 클릭했을 때:
  • 기본적으로 이벤트는 버튼에서 발생한 후 부모 요소인 div로 전파됩니다.
  • 따라서, 버튼을 클릭하면 원래는 JS_좋아요기능과 JS_확대하기기능이 모두 실행될 것입니다.
• event.stopPropagation() 사용:
  • JS_좋아요기능에서 event.stopPropagation()을 호출하면, 클릭 이벤트가 버튼에서 div로 전파되지 않습니다.
  • 즉, 버튼을 클릭해도 JS_확대하기기능이 실행되지 않게 됩니다. 오직 JS_좋아요기능만 실행되어 "좋아요가 +1 올라갔습니다."라는 알림만 뜹니다.

이처럼 stopPropagation을 사용하면 이벤트가 특정 요소에서 멈추고, 더 이상 부모 요소로 전파되지 않도록 제어할 수 있습니다. 이 기능은 종종 이벤트가 의도치 않게 여러 요소에 영향을 미치는 것을 방지하고자 할 때 유용합니다.

preventDefault vs stopPropagation

• preventDefault:
  • 브라우저가 이벤트에 대해 수행하는 기본 동작을 막습니다.
  • 예: 링크 클릭 시 페이지 이동, 폼 제출 시 페이지 리로드 등.
• stopPropagation:
  • 이벤트가 상위 요소로 전파되는 것을 막습니다.
  • 예: 자식 요소의 클릭 이벤트가 부모 요소로 전파되는 것을 방지.

📝 실습 코드