[JS] preventDefault로 기본 동작 중단시키기

DOM 요소는 기본 동작을 가지고 있다.

특정 DOM 요소에 이벤트가 발생했을 때, 이러한 기본 동작을 실행하지 못하도록 막는 메서드가 바로 preventDefault다.

이벤트 흐름의 어떤 단계에서라도 preventDefault를 호출하면 이벤트를 취소한다.

예를 들어서 체크박스는 클릭하면 체크박스에 체크를 하거나 체크를 해제하는 기본 동작을 가지고 있다. 이러한 체크박스에 클릭 이벤트가 발생했을 때, 기본 동작을 실행하지 못하도록 preventDefault 메서드를 호출해주면 다음처럼 체크박스에 체크를 할 수 없게 된다.

const checkbox = document.querySelector('#checkbox');

checkbox.addEventListener('click', (e) => {
  e.preventDefault();
});

이때, preventDefault 메서드가 취소할 수 있는 이벤트는 정해져 있다. 즉, 취소 불가능한 이벤트에 대해 preventDefault를 호출해봤자 취소할 수 없다.

이벤트의 취소 가능 여부는 Event.cancelable로 확인할 수 있다.

e.cancelable === true; // 취소할 수 있는 e (이벤트 객체)