티스토리 뷰

Javascript

event.preventDefault()

lluna 2021. 11. 7. 23:56

태그에 내장되어있는 기본 이벤트를 막을 때 사용한다.

event.cancelable 로 확인이 가능하다.

 

대표적으로 input 태그의 submit 이벤트, a 태그의 link 이벤트 등이 있다.

 

참고로 input 태그 내용물을 리셋하려면 (버튼 클릭 후 지우려면)

event.target.reset() 메서드를 활용하자.

 

<body>
  <!-- 1. checkbox -->
  <input type="checkbox" id="my-checkbox">
  <hr>

  <!-- 2. submit -->
  <form action="/articles/" id="my-form">
    <input type="text">
    <input type="submit" value="제출!">
  </form>
  <hr>

  <!-- 3. link -->
  <a href="https://google.com/" target="_blank" id="my-link">GoToGoogle</a>
  <hr>
  
  <script>
    // 1
    const myCheckbox = document.querySelector('#my-checkbox')
    myCheckbox.addEventListener('click', function () {
      event.preventDefault()
    })

    // 2
    const myForm = document.querySelector('#my-form')
    myForm.addEventListener('submit', function () {
      event.preventDefault()
      console.log(event.target)
      event.target.reset()
    })

    // 3
    const myLink = document.querySelector('#my-link')
    myLink.addEventListener('click', function () {
      event.preventDefault()
    })

  </script>
</body>
저작자표시 비영리 변경금지

'Javascript' 카테고리의 다른 글

AJAX  (0) 2021.11.08
간단한 Todo 구현하기  (0) 2021.11.08
DOM - Collection (Live vs. Static)  (0) 2021.11.07
for loop vs. forEach()  (0) 2021.11.07
DOM 조작 메서드 비교  (0) 2021.11.07
댓글