addEventListener

: 특정 이벤트 발생 시, 특정 함수를 실행하는 기능

target.addEventListener('이벤트', 함수, 캡쳐링불린값)

첫번째 인자는 이벤트명

이벤트 참조 : https://developer.mozilla.org/ko/docs/Web/Events

두번째 인자는 콜백 함수 (이벤트 발생 시 실행)

세번째 인자는 useCapture 불린값

캡쳐링과 버블링 참조 : https://chlolisher.tistory.com/22

preventDefault

: 페이지 이동 또는 form 내 input 값 전달을 중단하는 기능

e.preventDefault()

주로, 새로고침 방지나 페이지 이동을 막을 때 사용

defaultPrevented

event.defaultPrevented

값이 true일 경우, 기본 동작을 막은 경우

값이 false일 경우, 기본 동작을 막지 않은 경우

keyCode

: 자바스크립트에서 사용되는 keyCode는 ASCII 코드에 의거하여 숫자가 정의

키코드 참조 : https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

유용한 사이트 : https://keycode.info/

예시 코드

// 새로고침을 막는 코드
window.addEventListener(
    "keydown",
    (e) => {
      if (e.defaultPrevented) {
        return;
      } else if (e.keyCode === 116) {
        e.preventDefault();
      } else if (e.ctrlKey === true && (e.keyCode === 78 || e.keyCode === 82)) {
        e.preventDefault();
      }
    },
    true
  );