stopPropagation() 메서드란?
HTML DOM의 stopPropagation() 이벤트 메서드는 특정 요소에서 발생한 이벤트가 더 이상 전파되지 않도록 중단하는 데 사용됩니다. 웹 브라우저에서는 기본적으로 한 요소에서 발생한 이벤트가 상위(부모) 요소로 순차적으로 전달되는데, 이 현상을 이벤트 버블링(event bubbling)이라고 합니다.
stopPropagation() 메서드를 호출하면 자식 요소를 클릭했을 때 해당 이벤트가 부모 요소로 전달되지 않으며, 반대 방향의 전파도 차단할 수 있습니다. 덕분에 개발자는 원하는 요소에서만 이벤트 핸들러가 실행되도록 정확하게 제어할 수 있습니다.
구문(Syntax)
stopPropagation() 이벤트 메서드의 기본 구문은 다음과 같습니다.
event.stopPropagation()
이 메서드는 별도의 매개변수를 받지 않으며, 반환값도 없습니다. 단순히 현재 진행 중인 이벤트의 전파를 즉시 중지하는 역할만 수행합니다.
예제 코드
아래 예제는 div 요소 안에 이미지가 배치되어 있고, 체크박스 선택 여부에 따라 이벤트 전파를 제어하는 방식으로 stopPropagation()의 동작을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
#DIV_1 {
background: lightpink;
width:130px;
height:130px;
margin-left:40%;
text-align:center;
}
#IMG_1 {
width:100px;
height:100px;
position:relative;
left:5px;
}
</style>
</head>
<body>
<h1>stopPropagation() method example</h1>
<div id="DIV_1" onclick="OuterDiv()">
DIV ELEMENT
<img onclick="InnerImg(event)" id="IMG_1" src="https://www.tutorialspoint.com/hibernate/images/hibernate-mini-logo.jpg">
</div>
Stop propagation:
<input type="checkbox" id="check">
<script>
function InnerImg(event) {
confirm("Inner Image is clicked");
if (document.getElementById("check").checked) {
event.stopPropagation();
}
}
function OuterDiv() {
confirm("Outer div is clicked");
}
</script>
</body>
</html>코드 설명
- 바깥쪽 div(#DIV_1)에는 OuterDiv() 함수가 연결되어 있어 클릭 시 "Outer div is clicked" 알림창이 표시됩니다.
- 내부의 img(#IMG_1)에는 InnerImg() 함수가 연결되어 있어 클릭 시 "Inner Image is clicked" 알림창이 표시됩니다.
- 체크박스(check)가 선택된 상태에서 이미지를 클릭하면 event.stopPropagation()이 호출되어, 이미지의 클릭 이벤트가 부모 div로 전파되지 않습니다.
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
체크박스를 선택하지 않은 상태에서 div 내부의 이미지를 클릭하면 아래와 같은 알림창이 나타납니다.
알림창에서 "확인(OK)"을 누르면 이벤트가 부모 div까지 전파되어 두 번째 알림창이 표시됩니다.
반면, 체크박스를 먼저 선택한 후 내부 이미지를 클릭하면 stopPropagation()에 의해 이벤트 전파가 차단되어 이미지의 알림창만 표시되고 부모 div의 알림창은 나타나지 않습니다.
참고: stopPropagation()과 preventDefault()의 차이
두 메서드는 자주 혼동되지만 역할이 완전히 다릅니다. stopPropagation()은 이벤트가 다른 요소로 전달되는 것을 막는 반면, preventDefault()는 링크 이동이나 폼 제출 같은 브라우저의 기본 동작 자체를 취소합니다. 필요에 따라 두 메서드를 함께 사용할 수도 있습니다.