자바스크립트 event.stopPropagation(), event.preventDefault ()

자바스크립트(Javascript)에서 이벤트 버블링 / 이벤트 캡처링을 막기위해서 아래와 같은 코드를 사용합니다.

event.stopPropagation(), event.preventDefault ()

이 두가지 이벤트의 차이는 사용자가 만든 이벤트를 막느냐 & 기본 이벤트를 막느냐 차이인데 자세한 내용은 아래 소스를 보고 설명하겠습니다.

<a href = "http://google.com">
  <div id="blockArea">
    <img src="logo.png" id="logo" alt="logo"></img>
  </div>
</a>

<script>
  document.getElementById("blockArea").onclick = function(){ alert("block click"); });
  document.getElementById("logo").onclick = function(){ alert("logo click"); });

</script>

위와 같은 마크업 태그가 있다고 가정할시에

이미지를 클릭하면 아래와 같은 순서로 이벤트가발생합니다.

alert("logo click")  -> alert("block click") -> http://google.com 으로 이동

위 마크업에서 아래와 같이 stopPropagation(); 를 사용하면 

<a href = "http://google.com">
  <div id="blockArea">
    <img src="logo.png" id="logo" alt="logo"></img>
  </div>
</a>

<script>
  document.getElementById("blockArea").onclick = function(){ alert("block click"); });
  document.getElementById("logo").onclick = function(e){ e.stopPropagation(); alert("logo click"); });

</script>

사용자의 액션에 의한 이벤트가 막아지므로 alert("block click") 이벤트를 막을 수 있다. 하지만 기본이벤트인 a href="http://google.com" 으로의 이동은 막을 수 없습니다.

반대로 preventDefault(); 를 사용하면 브라우저의 기본 이벤트가 무효화 되므로

a href 태그의 링크가 작동하지 않는다. 하지만 사용자가 정의한 이벤트 alert("logo click") -> alert("block click") 는 발생합니다.

만약 둘다 막고 싶다면 stopPropagation(); / preventDefault(); 를 둘다 이용하면 됩니다.