stopPropagation() 과 preventDefault() 의 차이.

javascript 에서는, 이벤트를 막기 위해서는 stopPropagation() 과 preventDefault() 를 쓴다.

이전에는 이 이벤트들의 차이를 멋도 모르고 그냥 썼는데, 최근에 우연히 이 둘의 차이를 확실하게 알게 되어 적어 놓는다.

이 둘의 차이는, 사용자가 발생한 이벤트를 막느냐, 기본 이벤트를 막느냐의 차이다.

예를 들어, 이런 코드를 보자.

<a href="http://www.daum.net">

<div id="div1">

<img src="./image/logo.jpg" id="img1"></img>

</div>

</a>

<script>

document.getElementById('div1').onclick = function(){ alert( 'click div1' ); };

document.getElementById('img1').onclick = function(){ alert( 'click img1' ); };

</script>

사용자가 여기서, 이미지를 클릭한다면 어찌 될까?

아마도 "click img1" 이 alert 로 뜨고, 다음 "click div1" 이 뜨고, 그 다음 www.daum.net 으로 넘어갈 거다.

만일 onclick 함수에서 stopPropargation() 을 쓰면, 사용자의 액션에 의한 이벤트 전파가 막아지므로, "click div1" 의 alert 이 뜨는 걸 막을 수는 있다.

하지만, http://www.daum.net 으로 이동하는 걸 막지는 못한다.

만일 onclick 함수에서 proventDefault() 를 쓰면, 브라우저의 기본 이벤트가 무효화 되므로, Ancher 태그의 hlink 가 작동하지 않는다. 즉 http://www.daum.net 으로 이동하지 않는다.

하지만, 사용자 클릭 이벤트 전파는 막지 않으므로, alert() 2번. 'click img1" 과 'click div1"이 둘 다 뜬다.

몰론, stopPropagation() 과 preventDefault() 를 둘 다 쓰면, 둘 다 막겠지.

이상. 끝.