이벤트 막기

event.preventDefault()

event.preventDefault() 는 HTML 태그의 기본 이벤트를 막아주는 메서드이다.

• a 태그를 눌렀을 때, 링크로 이동하지 않게 할 경우
• form 안의 내용을 submit 이벤트로 보낼 때, 새로고침이 실행되지 않게 할 경우

submit 의 경우에는 제출과 동시에 창이 새로고침이 된다. 따라서 preventDefault 를 하지 않으면 이벤트가 발생하고 무언가를 처리하는 로직을 적어두었을 때 올바르게 작동하지 않을 수 있다.

passive event

하지만 preventDefault 메서드가 통하지 않는 이벤트가 존재한다. 예시로 wheel 이벤트가 있다. 페이지를 스크롤 할 때 발생하는 이벤트인 wheel 이벤트는 수동적인 성격의 이벤트이기 때문에 preventDefault 메서드가 통하지 않는다
이러한 passive event 를 막기 위해서는 옵션을 지정해야 한다. addEventListener 메서드의 콜백을 등록하고, 그 다음에 passive 옵션을 false로 지정하면 된다.

document.addEventListener(
  'wheel',
  event => {
   console.log('scrolling');
   event.preventDefault();
  },
  { passive : false }
);