[JavaScript] preventDefault() 와 stopPropagation()

preventDefault() 와 stopPropagation()이란? 

JavaScript에서 이벤트를 다룰 때, 기본 동작을 막거나 이벤트의 전파를 차단해야 하는 경우가 있습니다. 이를 위해 preventDefault() 와 stopPropagation() 메서드를 사용할 수 있습니다. 

• preventDefault(): 기본 동작(폼 제출, 링크 이동 등)을 차단
• stopPropagation(): 이벤트가 부모 요소로 전파(버블링)되는 것을 방지

이 두 가지는 완전히 다른 역할을 하므로, 상황에 맞게 적절히 사용해야 합니다. 아래에서 각각의 개념을 자세히 알아보고 예제를 살펴보겠습니다. 

preventDefault() : 기본 동작 차단 

이벤트가 발생했을 때, 브라우저의 기본 동작을 막는 메서드입니다. 예를 들어, <a> 태그는 기본적으로 클릭 시 다른 페이지로 이동하지만, preventDefault()를 사용하면 이동을 막을 수 있습니다. 

예제 1: 링크 이동 방지 

<a href="https://google.com" id="myLink">Google로 이동</a> 

<script> 
  document.getElementById("myLink").addEventListener("click", function(event) {
    event.preventDefault(); // 기본 동작 차단 
    alert("이 링크는 클릭해도 이동하지 않습니다!"); 
  });
</script>

 

preventDefault()를 호출하면 <a> 태그의 기본 동작(페이지 이동)이 차단됨. 

따라서 클릭해도 Google로 이동하지 않고 alert 창만 표시됨. 

예제 2: 

폼 제출 방지 보통 <form> 요소는 버튼을 클릭하면 자동으로 제출됩니다. 

하지만 preventDefault()를 사용하면 이를 방지할 수 있습니다.

<form id="myForm"> 
  <input type="text" placeholder="이름 입력" required> 
  <button type="submit">제출</button> 
</form>

<script> 
  document.getElementById("myForm").addEventListener("submit", function(event) {
    event.preventDefault(); // 폼 제출 방지 
    alert("폼이 제출되지 않았습니다!"); 
  });
</script>

설명: <form> 태그는 기본적으로 버튼 클릭 시 자동 제출됨. event.preventDefault()를 사용하면 폼이 서버로 전송되지 않음. 이를 활용하면 클라이언트 측 유효성 검사 후 제출 여부를 결정할 수 있음. 

stopPropagation() : 이벤트 전파 방지 

stopPropagation()이란? 

이벤트가 발생하면 버블링(Bubbling) 방식으로 부모 요소까지 전파됩니다. stopPropagation()을 사용하면 이벤트가 부모 요소로 전달되지 않도록 차단할 수 있습니다.

 예제 1:

 클릭 이벤트 전파 방지 아래 예제에서 버튼 클릭 시 부모 요소의 클릭 이벤트까지 실행되는 문제를 해결해보겠습니다. 

<div id="parent" style="padding: 20px; background: lightblue;"> 
  <button id="child">버튼 클릭</button> 
</div> 

<script> 
  document.getElementById("child").addEventListener("click", function(event) {
    event.stopPropagation(); // 부모 요소로 이벤트 전파 방지 
    alert("버튼이 클릭되었습니다!"); 
  }); 
  
  document.getElementById("parent").addEventListener("click", function() {
    alert("부모 요소가 클릭되었습니다!");
  });
</script>

설명: 버튼을 클릭하면 원래 부모 요소(div)의 이벤트도 실행됨. stopPropagation()을 사용하면 부모 요소로의 이벤트 전파를 차단할 수 있음. 

따라서 버튼을 클릭해도 "부모 요소가 클릭되었습니다!" 알림이 뜨지 않음.

 예제 2: 

이벤트 위임과 stopPropagation() 활용 이벤트 위임을 사용할 때 특정 요소만 이벤트가 실행되도록 **stopPropagation()**을 적용할 수도 있습니다.

<ul id="list"> 
  <li>아이템 1</li>
  <li>아이템 2</li> 
  <li>아이템 3</li>
</ul> 

<script> 
  document.getElementById("list").addEventListener("click", function(event) {
    if (event.target.tagName === "LI") { 
      event.stopPropagation(); // 이벤트 전파 차단 
      alert(event.target.innerText + " 클릭됨!"); } 
    }); 
    
    document.body.addEventListener("click", function() { 
      alert("body 클릭됨!"
    ); 
  }); 
 </script>

설명: <ul> 요소에 이벤트 리스너를 등록하여 이벤트 위임 적용. stopPropagation()이 없으면 <li> 클릭 시 body의 클릭 이벤트까지 실행됨. stopPropagation()을 적용하면 부모 요소(body)로 이벤트가 전달되지 않음! 

preventDefault() vs stopPropagation() 차이점 정리

메서드역할사용 예제 preventDefault() 기본 동작 차단 링크 이동, 폼 제출 방지 stopPropagation() 이벤트 전파 방지 부모 요소로 이벤트 전달 차단

간단한 요약:

• preventDefault() → "이벤트는 발생하지만 기본 동작은 실행되지 않도록 한다!"
• stopPropagation() → "이벤트가 부모 요소로 전파되지 않도록 막는다!"

---

마무리