[JS] e.preventDefault() & e.stopPropagation()

 

 

e.preventDefault() & e.stopPropagation()

 

 

e.preventDefault()와 e.stopPropagation()는 이벤트 관련 동작에서 많이 사용되는 두 가지 함수이다. 이 두 함수의 차이점은 다음과 같다. 

• e.preventDefault(): HTML에서 a 태그나 submit 태그는 고유의 동작이 있다. 예를 들어, a 태그는 페이지를 이동시키고, submit 태그는 form태그 안에 있는 input 등을 전송한다.  e.preventDefault()는 이러한 고유 동작을 중단시키는 함수이다.
  
  
• e.stopPropagation(): 이벤트가 발생하면 해당 이벤트가 발생한 요소 뿐만 아니라, 상위요소에도 이벤트가 전파된다. 예를 들어, 특정 요소를 클릭했을때, 해당요소와 해당요소의 상위요소에도 클릭이벤트가 전달된다. e.stopPropagation()은 이벤트가 상위요소에 전달되지 않도록 막아주는 함수이다. 

 

 

e.preventDefault()

 

 

<a href="https://example.com">링크</a>

다음과 같은 코드에서 a 태그를 클릭하면 링크가 있는 페이지로 이동한다. 이때 다음과 같은 코드를 추가하면 일크가 있는 페이지로 이동하는 동작을 중단시킬 수 있다.

 

 

document.addEventListener('click', function(e) {
  if (e.target.tagName === 'A') {
    e.preventDefault();
  }
});

위 코드로 작성하게 되면 링크가 있는 페이지로 이동하느 동작을 중단시킨다. document 객체에 click이벤트를 등록하고, 이벤트가 발생했을 때 이벤트의 대상이 A 태그인 경우 e.preventDefault()를 호출하여 링크가 있는 페이지로 이동하는 동작을 중단시킨다.

 

 

e.stopPropagation()

 

 

<div class="parent">
  <div class="child">
    내용
  </div>
</div>

위 코드에서 child요소를 클릭하면, parent요소에도 클릭이벤트가 전달된다. 이를 막기위해서 e.stopPropagation()코드를 추가해주면 된다.

 

 

document.addEventListener('click', function(e) {
  if (e.target.classList.contains('child')) {
    e.stopPropagation();
  }
});

위와 같이 작성하면 parent요소에 전달되는 클릭이벤트를 차단할 수 있다. click 이벤트를 등록하고, 만약 child 요소를 클릭하면 parent요소에 이벤트가 전달되지 않도록 e.stopPropagation()을 작성해주면 된다.