e.preventDefault() 와 stopPropagation() 의 차이

1. e.preventDefault()

 

html 에서 a 태그나 submit 태그는 고유의 동작이 있다. (페이지 이동, input 전송 등)

이러한 동작을 e.preventDefault 는 중단시킨다.

 

예를들어, 

※ HTML

<a href="https://pa-pico.tistory.com">PAPICO 블로그로</a>

 

※ JS

$("a").click(function(e){

        e.preventDefault();

        alert("e.preventDefault()");

});

 

원래라면은 a 태그를 클릭했을 떄, 페이지이동이 이루어져야하지만 e.prenentDefault 는 그것을 중단시키고 자바스크립트에 짜여진 얼럿을 호출 시키는걸 볼 수 있다.

 

2. stopPropagation() 

 

※ HTML

<div class="first-cover">

    <ul class="second-cover">

      <li class="third-cover">

         <div class="last-el">event</div>

      </li>

   </ul>

</div>

 

※ JS

$(".last-el").click(function(e){

               e.stopPropagation();

               alert("last-el");

});

$(".third-cover").click(function(){

                    alert("third-cover");

});

$(".second-cover").click(function(){

                        alert("second-cover");

});

$(".first-cover").click(function(){

                         alert("first-cover");

});

 

e.stopProPagation() 함수가 없다면, ".last-el"에 해당하는 부분을 클릭하면 이벤트가 전파되어 얼럿이 연달아 발생하는걸걸 볼 수 있을것이다! 이때 사용하는게 e.stopProPagation() 함수다.

해당 함수를 사용하면 이벤트가 전파되지 않는걸 볼 수있다. 

 

 

결론은

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