이벤트 모델

이벤트 코드는 등록 방식과 실행 시점 검토

클릭, 입력, 제출은 사용자 행동이고 JavaScript 함수는 그 행동 뒤에 실행된다. 시험에서는 어떤 방식으로 함수를 연결했는지, 기본 동작을 막아야 하는 상황인지가 함께 나온다.

onclick

HTML 속성 방식

버튼 태그 안에 바로 적어 간단하지만 HTML과 JavaScript가 섞이면 코드가 커질수록 관리가 어려워진다.

btn.onclick

고전 이벤트 모델

요소의 이벤트 속성에 함수를 대입한다. 같은 이벤트에 다시 대입하면 앞의 처리가 덮일 수 있다는 점을 확인한다.

addEventListener

표준 이벤트 모델

하나의 이벤트에 여러 리스너를 등록할 수 있고, HTML과 동작 코드를 분리하기 좋아 기본 선택지로 본다.

문제에서 먼저 볼 기준

  • 대상 찾기 document.getElementById로 버튼, 입력칸, 결과 영역을 찾았는가.
  • 함수 연결 click, keydown, submit 같은 사건에 콜백 함수가 연결되었는가.
  • 결과 변경 textContent, style.color, value처럼 DOM 값을 실제로 바꾸는가.
  • 기본 동작 폼 제출을 막아야 하면 event.preventDefault()가 있는지 본다.