---

이벤트(Event)

• 시스템에서 일어나는 사건(action)을 의미함.
• 웹의 경우 브라우저 윈도우(window) 내에서 발생.
  • 요소 위에 커서를 올림 (hover)
  • 키보드에서 키를 누름
  • 브라우저 창의 크기를 조정하거나 닫음
  • 웹 페이지 로딩 완료
  • 오류 발생

이벤트 핸들러(Event handler)

• 웹 API에서 제공. (비동기)
• 이벤트가 발생했을때 실행되는 코드블럭.
• 이벤트에 응답해서 실행하기로 정의되었을 때, 이벤트 핸들러 등록이라고 말함.
• 이벤트 리스너(event listener)라고도 불림.
• 엄밀하게는 리스너는 이벤트 발생을 감시하고(듣고), 핸들러는 이벤트 발생시 응답하는 코드.
• 이벤트 핸들러의 프로퍼티 존재.

이벤트	기능
onclick	마우스 클릭 시
ondbclick	마우스 더블클릭 시
onmouseover	마우스 포인터가 요소 위에 올라왔을 때
onchange	input 요소 값이 바뀔 시(변경된 이후, focus out 시)
oninput	input 요소 값이 바뀔 시(바뀐 직후)
onblur	input 요소에서 focus out 시
onload	해당 페이지가 로드 될 때

인라인 이벤트 핸들러

• 추천하지 않는 방식.
• HTML과 JS를 섞지 않고 분리하는 것을 지향.

<button onclick="console.log('event!')">Event button</button>;

기본 이벤트 핸들러

• JS에서 이벤트 프로퍼티를 이용하는 방법.
• 한개의 이벤트 핸들러만 처리 가능.

const btn = document.querySelector('button');

btn.onclick = function () {
  console.log('event!');
};

표준 이벤트 핸들러

• 표준 방법. (현대적인 메커니즘)
• EventTarget.addEventListener( 'event', function() ) 메서드 이용.
• EventTarget.removeEventListener( 'event', function() ) 를 이용해 삭제도 가능.
• 하나의 이스너에 다양한 핸들러를 등록 가능.

btn.addEventListener('click', function () {
  console.log('event!');
});

// functionA, functionB 둘 다 동작.
myElement.addEventListener('click', functionA);
myElement.addEventListener('click', functionB);

---