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

두개 코드 모두 이벤트 관련 동작에서 많이 사용되는 함수 
 

e.prventDefault()

html에서 a, submit 태그는 고유의 동작이 있다. 페이지이동, Form 안에 input 등을 전송하는 동작인데 e.prventDefault 는 그동작을 중지 시킨다. 
 

$(document).ready(function(){
	$('.btnScroll > ul > li > a, .quickMenuArea a, .moveCardLink').on('click', function(e){
		e.preventDefault();
		var $this = $(this);
		var $btnSplit = $this.attr('href').split('#');
		var $btnScroll = $btnSplit[1];
		console.log($btnScroll);
		if( $btnScroll == "tabCont01"){	var id_height = 30;	}else{ var id_height = 40; }
		$('html,body').animate({scrollTop: $("#"+$btnScroll).offset().top - id_height},300);
	});
});

e.stopPropagation는 이벤트가 상위 엘리멘트에 전달 되지 않게 막아 준다.

<div class="first-cover">
  <ul class="second-cover">
    <li class="third-cover">
      <div class="last-el">event</div>
    </li>
  </ul>
</div>


<script>
$(".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");
});
</script>