5. e.preventDefault() 와 e.stopPropagation() 의 차이 정리

e.preventDefault() 와 e.stopPropagation()

 

일단 이 두 개의 코드 모두 이벤트 관련 동작에서 많이 사용된다.

 

e.preventDefault()

 

HTML 에서 <a> 태그나 <submit> 는 고유의 동작을 가진다. 예를 들어, 페이지를 이동시킨다거나 form 안에 있는 <input> 데이터 등을 전송한다. 이때, e.preventDefault() 는 그러한 동작을 중단시킨다.

// index.html
<a href="https://blog.naver.com/wlsekffo1674">LHWN's BLOG</a>

위에서 LHWN's BLOG 를 클릭하면 내 블로그로 이동될 것이다.

// index.html
<a href="https://blog.naver.com/wlsekffo1674">LHWN's BLOG</a>

// preventDefault.js
$("a").click(function(e)) {
  e.preventDefault();
  alert("stop to move");
}

만일 위 코드에서 e.preventDefault() 를 넣으면, <a> 태그의 href 속성이 중단되고, 다음 코드인 alert("stop to move") 가 실행된다.

 

e.stopPropagation()

 

// index.html
<div class="firstDiv">
  <ul class="secondUl">
    <li class="thirdLi">
      <div class="lastDiv">LHWN's BLOG</div>
    </li>
  </ul>
</div>

// stopPropagation.js
$(".lastDiv").click(function(){
	alert("lastDiv");
});
$(".thirdLi").click(function(){
	alert("thirdLi");
});
$(".secondUl").click(function(){
	alert("secondUl");
});
$(".firstDiv").click(function(){
	alert("firstDiv");
});

여기서 LHWN's BLOG 를 클릭하면 lastDiv → thirdLi → secondUl → firstDiv 가 차례로 Alert 되는 것을 볼 수 있다.

즉, 부모 엘리먼트에게도 이벤트가 전파되는 것이다.

​

이를 막기 위해 사용하는 것이 e.stopPropagation 이며, 이벤트가 상위 엘리먼트에게 전달되지 않도록 막아준다.

// stopPropagation.js
$(".lastDiv").click(function(){
    e.stopPropagation();
	alert("lastDiv");
});
$(".thirdLi").click(function(){
	alert("thirdLi");
});
$(".secondUl").click(function(){
	alert("secondUl");
});
$(".firstDiv").click(function(){
	alert("firstDiv");
});

 

lastDiv 에 e.stopPropagation() 를 추가해주면 alert("lastDiv") 만 실행되고 중단된다.

 

e.preventDefault() 는 이벤트 고유의 동작을 중단시키고,
e.stopPropagation() 은 상위 엘리먼트로의 이벤트 전파를 중단시킨다.