[JS] e.preventDefault

 

e.preventDefault()

<a> 태그는 href에 연결된 링크를 통해, 해당 페이지로 이동하는 기능을 가지고 있으며, <submit>태그는 그 태그의 값을 전송하면서 해당 페이지를 새로고침 하는 기능을 가지고 있다. 이러한 기능들은 매우 유용하지만, 그 의도로 사용하지 않게 될 경우 불편함을 야기할 수 있다. 이때 사용하는 것이 바로 event.preventDefault() 이다.

<a href="XXX.html" id="link">HTML 이동</a>
<script>
   document.querySelector('#link').addEventListenner('click', function(e) {
      e.preventDefault();
   });
   // a 태그 클릭 시 preventDefault를 사용했기 때문에 링크값이 있어도 이동하지 않는다.
</script>

<submit> 역시 마찬가지로 사용된다.

 

const form = document.querySelector('#')

form.addEventListener("submit", (e) => {
   e.preventDefault();
   const title = e.target.title.value;
   const writer = e.target.writer.value;
   const content = e.target.content.value;  
})

즉 e.eventDefault(): 현재 이벤트의 기본 동작을 중단한다.

 

기본 이벤트 중지 시키기

자동이벤트 발생하는 이벤트 (form onsubmit=return false, a href) 중지시키기

이벤트객체.preventDefault();

See the Pen Untitled by sangheun park (@sangheun-park) on CodePen.