![[Javascript] e.stopPropagation() vs e.preventDefault()](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FJ0q5s%2FbtsMBZ0CFPc%2Fk4Q4SDoolboH98GzR6TwB1%2Ftfile.svg)
728x90
안녕하세요🫶 개발자 재민콩입니다!
웹 개발을 하다 보면, e.stopPropagation()과 e.preventDefault()를 자주 만나게 됩니다.
처음 접할 때는 이 두 메서드가 비슷해 보이지만, 사실 완전히 다른 역할을 합니다.
오늘은 이 둘의 차이를 명확하게 이해할 수 있도록 자세히 알아보겠습니다.
e.stopPropagation()
이 메서드는 이벤트가 상위 요소로 전파(Propagation)되는 것을 막아줍니다.
즉, 현재 요소에서 이벤트가 발생해도 부모 요소로 이벤트가 전달되지 않습니다.
이벤트 전파란?
브라우저는 기본적으로 이벤트 버블링(Event Bubbling)과 이벤트 캡처링(Event Capturing)이라는 이벤트 흐름을 가지고 있습니다.
- 이벤트 버블링(Bubbling)
- 자식 요소에서 발생한 이벤트가 부모 요소로 전달됨 (가장 흔한 이벤트 흐름)
- 이벤트 캡처링(Capturing, Trickle-down)
- 부모 요소에서 자식 요소로 이벤트가 전달됨 (잘 사용하지 않음)
e.stopPropagation()은 버블링과 캡처링을 모두 차단하는 역할을 합니다.
e.stopPropagation() 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>stopPropagation 예제</title>
<style>
.parent { width: 300px; height: 300px; background-color: lightgray; padding: 20px; }
.child { width: 100px; height: 100px; background-color: tomato; }
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
<script>
document.querySelector('.parent').addEventListener('click', function () {
alert('부모 요소 클릭!');
});
document.querySelector('.child').addEventListener('click', function (e) {
e.stopPropagation(); // 부모 요소로 이벤트 전파를 막음
alert('자식 요소 클릭!');
});
</script>
</body>
</html>
실행 결과
- .child(빨간색 박스)를 클릭하면 "자식 요소 클릭!" 알림이 뜸.
- 원래라면 이벤트가 부모 .parent 요소까지 전달되어 "부모 요소 클릭!"도 떠야 하지만, e.stopPropagation()이 이를 막음.
즉, 버블링을 차단하여 부모 요소가 이벤트를 받지 않도록 만듭니다.
e.preventDefault()
이 메서드는 브라우저의 기본 동작(Default Behavior)을 막아줍니다.
즉, 특정 HTML 요소가 가지고 있는 기본 이벤트를 수행하지 않도록 방지합니다.
e.preventDefault() 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>preventDefault 예제</title>
</head>
<body>
<a href="https://www.google.com" id="myLink">구글로 이동</a>
<script>
document.querySelector('#myLink').addEventListener('click', function (e) {
e.preventDefault(); // 기본 동작 차단
alert('이동이 차단되었습니다!');
});
</script>
</body>
</html>
실행 결과
- "구글로 이동" 링크를 클릭해도 구글로 이동하지 않고,
- 대신 "이동이 차단되었습니다!"라는 알림창이 뜸.
e.preventDefault()는 단순히 기본 동작을 막을 뿐, 이벤트 전파(버블링/캡처링)와는 관계가 없습니다.
즉, 부모 요소까지 이벤트가 전달될 수 있음
e.stopPropagation() vs e.preventDefault() 정리
| 메서드 | 역할 | 예제 |
| e.stopPropagation() | 이벤트가 부모 요소로 전파되는 것을 막음 | 버튼 클릭 시 부모까지 전달되지 않도록 방지 |
| e.preventDefault() | 기본 동작(예: 링크 이동, 폼 제출 등)을 막음 | 클릭해도 링크가 이동하지 않게 방지 |
Reference
728x90
'Frontend > Javascript' 카테고리의 다른 글
| [Javascript] Html video currentTime 수정 불가 해결 (10) | 2023.03.07 |
|---|---|
| [Javascript] Daterangepicker Custom (1) | 2022.11.07 |
| [Javascript] file drag&drop 제어(dragenter, dragleave, dragover, drop) (0) | 2022.11.01 |
| [Javascript] 배열(Array) 관련 함수 사용법(push, pop, shift, unshift, splice) (0) | 2022.10.31 |