event.stopPropagation(), event.preventDefault() > Javascript

event.stopPropagation()

propagation 의 사전적의미는 전파, 확산이다.
사용자가 마우스로 웹페이지 내의 버튼을 클릭했을때 단순히 버튼만 반응한 것이 아니라 웹페이지 내부에서는 버튼을 감싸고 있는 부모 태그들 또한 클릭 이벤트에 반응하게 된다. 이것을 Bubble Up(버블업)이라고 한다.​

만약 예를 들어 ul > li > a 의 구조로 태그가 구성되어 있다면 사용자가 a 태그를 클릭했을때 클릭이벤트는 a 태그를 감싸고 있는 li, ul 태그로 순차적으로 전달되게 된다. 

즉, a 태그의  onclick -> li 태그의 onclick -> ul 태그의 onclick 을 실행하게 된다. 

만약에 ul 태그에 클릭 이벤트가 있을 경우 a 태그를 클릭하는 순간에는 의도하지 않은 ul 태그의 클릭 이벤트가 실행된다.

이때 stopPropagation 은 부모태그로의 이벤트 전파를 중지시킨다. 

즉, a 태그에 발생한 이벤트가  li, ul 태그까지 가지 않는다.

event.preventDefault()

<a id="a_sample" href="http://www.naver.com/">바로가기</a>

$("#a_sample").on("click", function(){

//클릭함수 실행..

});

위의 a 태그는 href 속성과 onclick 이벤트가 함께 존재한다. 

우선순위는 onclick이벤트가 먼저 실행되지만 그 다음 href속성대로 이동하는 하이퍼링크가 실행이 된다.

이런 태그의 기본 브라우저 행동을 막기 위해서 사용하는게 preventDefault 이다. 

위의 a 태그처럼 클릭 이벤트 외에 하이퍼링크 이동할 필요가 없을경우는 다음과 같이 함수내에 넣어주면 된다.

$("#a_sample").on("click", function(e){

e.preventDefault();​

//클릭함수 실행..