12.7.2 이벤트 취소하기

HTML 태그 중 일부는 기본으로 이벤트가 적용되어 있습니다. 대표적으로 a 태그와 form 태그가 그렇습니다. a 태그는 생성된 요소를 클릭하면 다른 페이지로 이동하도록 클릭 이벤트가 연결된 상태입니다. form 태그는 폼 내부에서 버튼이 눌리면 전송되도록 전송 이벤트가 연결된 상태입니다.

그런데 preventDefault() 메서드를 사용하면 태그에 기본으로 연결된 이벤트를 취소할 수 있습니다. 예로 a 태그에 연결된 클릭 이벤트를 취소해 보겠습니다. 다음 코드에는 2개의 a 태그가 있으므로 모든 요소 노드의 이벤트를 취소하려면 반복해서 개별 노드에 접근해야 합니다.

<a href="https://www.naver.com">네이버 이동</a>
<a href="https://www.daum.net">다음 이동</a>
<script>
  const aEls = document.querySelectorAll("a");
  for(let i = 0; i < aEls.length; i++){
    aEls[i].addEventListener("click", function(e){
      // 기본 이벤트 취소
      e.preventDefault();
    });
  }
</script>

그림 12-46 실행결과

예제 코드를 실행하면 a 태그로 작성된 요소가 보입니다. 하지만 preventDefault() 메서드에 의해 기본 이벤트가 취소되어서 링크를 아무리 클릭해도 해당 페이지로 이동되지 않습니다.