1. 브라우저 이벤트

브라우저는 이벤트와 이벤트 타겟으로 이루어져 있습니다.

1-1. 이벤트(Event)

1) 개념

1. 이벤트는 무언가 일어났다는 신호
2. 모든 DOM 노드에서 발생할 수 있음.
3. DOM 외에도 브라우저 자체에서 발생하는 이벤트도 있음.

2) 자주 사용되는 DOM 이벤트

1. 마우스 이벤트(Mouse Events)
   1. click – 마우스 왼쪽 버튼 클릭(터치스크린에서는 탭)
   2. contextmenu – 마우스 오른쪽 버튼 클릭
   3. mouseover / mouseout – 마우스가 요소 위/밖으로 이동
   4. mousedown / mouseup – 마우스를 누를 때/뗄 때
   5. mousemove – 마우스를 움직일 때
2. 폼 요소 이벤트(Form Events)
   1. submit – <form>이 제출될 때
   2. focus – <input> 등 폼 요소가 포커스를 받을 때
3. 키보드 이벤트(Keyboard Events)
   1. keydown / keyup – 키보드를 누를 때/뗄 때
4. 문서 이벤트(Document Events)
   1. DOMContentLoaded – HTML이 로드 및 파싱 완료될 때
5. CSS 이벤트(CSS Events)
   1. transitionend – CSS 애니메이션이 종료될 때

1-2. 이벤트 핸들러 (Event Handler)

1) 이벤트 객체

1. 개념

   1. 이벤트가 발생하면 브라우저는 이벤트 객체를 생성하여, 핸들러에 전달

2. 주요 속성

   1. 표

   속성	설명
   event.type	이벤트 타입 (예: "click", "keydown")
   event.target	이벤트가 발생한 가장 안쪽(실제 클릭된) 요소
   event.currentTarget	현재 이벤트 핸들러가 실행된 요소 (this와 유사)
   event.eventPhase	현재 이벤트의 단계 (캡처링=1, 타깃=2, 버블링=3)
   event.clientX ,event.clientY	마우스 이벤트 시, 클릭 위치 (좌표)

2) 이벤트 핸들러 할당 방법