[JS] 브라우저 기본 동작

대부분의 이벤트는 브라우저에 의해 기본 동작을 수행합니다.

그러나, 기본 동작을 막고 직접 동작을 구현하는 경우가 생깁니다.

기본 동작 막기

event 객체를 사용해, 구현된 preventDefault() 메서드를 사용합니다.

링크 클릭시 URL로 이동, 폼 submit시 서버에 폼 전송 등 기본 동작을 막습니다.

addEventListener의 passive 옵션

addEventListener의 options중 passive:true는
브라우저에게 preventDefault()를 호출하지 않겠다고 알립니다.

모바일의 touchmove같은 이벤트는 스크롤링을 발생시키는데,
preventDefault가 호출되지 않았음을 확인하고, 스크롤링을 진행합니다.
이 때, 지연이 생기고 화면이 떨리는 현상이 발생합니다.

passive 옵션은 이러한 지연을 막습니다.

defaultPrevented

기본 동작을 막은 경우는 event.defaultPrevented의 값이 true이고, 아닌 경우는 false입니다.

stopPropagation을 사용하는 대신, defaultPrevented를 통해 이벤트가 적절히 처리됨을 알릴 수 있습니다.

document.addEventListner('contextmenu', event=> {
  event.preventDefault();
  alert('문서 컨텍스트 메뉴');
});

elem.addEventListner('contextmenu', event=> {
  event.preventDefault();
  alert('elem 컨텍스트 메뉴');
});  

이 때, 이벤트 버블링에 의해 elem 우클릭 시 문서 컨텍스트 메뉴도 동작합니다.
elem 우클릭시에 문서 컨텍스트 메뉴는 동작하지 않게 할 때,
stopPropagation 대신 event.defaultPrevented를 통해 확인합니다.

이미 기본 동작을 막고 동작했다면, 다시 동작하지 않습니다.

document.addEventListner('contextmenu', event=> {
  if (event.defaultPrevented) return; // (*)
  
  event.preventDefault();
  alert('문서 컨텍스트 메뉴');
});

elem.addEventListner('contextmenu', event=> {
  event.preventDefault();
  alert('elem 컨텍스트 메뉴');
});  

기본 동작을 막으면서, 원하는대로 동작을 수정할 수 있습니다.
하지만, HTML 요소의 의미는 지키면서 동작을 수정해야합니다.
이는, 좋은 코드가 될 뿐 아니라 접근성 측면에서 도움됩니다.