DOM 문서 + a 어디쯤 왔니?

: 순서상 `DOMContentLoaded && readyState : interactive` => `readyState : complete && load`

DOMContentLoaded

: HTML 문서 파싱을 완료하고 DOM 객체를 생성했을때 document 객체 에서 발생하는 이벤트이다.

readystate

- loading : DOM을 로딩하고 있을 때

- interactive : DOM 로드를 완료하고, 문서가 parsed 상태이지만, 스크립트, 이미지, 스타일시트 등의 하위 리소스는 여전히 로드 중인 상태 + DOMContentLoaded가 곧 발생함을 의미하는 상태 => 실제로 DOMContentLoaded 이벤트 핸들러에서 readyState는 'interactive' 상태임

- complete : DOM과 하위 리소스 모두를 로딩한 상태로 곧 load 이벤트가 발생함.

load

: DOMContenLoaded 이벤트 발생후 모든 리소스 로딩이 완료됐을 때 발생(주로 window 객체에서 발생한다).

마우스 이벤트

mouseover/mouseout

이벤트 버블링이 생긴다.

out_div

inner_div

>> log

mouseenter/mouseleave

이벤트 버블링이 생기지 않는다.

non-bubble-out_div

inner_div

>> log

이벤트 버블링(Double Click Event)

이벤트 버블링 로직을 알아보자

ancestor

parent

child

>> log

이벤트 캡쳐링(Mouse Down Event)

이벤트 캡쳐링 로직을 알아보자

ancestor

parent

child

>> log

키보드 이벤트

Key Up 이벤트

누르고 있던 키를 놓았을 때 한번만 발생한다.

>> log

Key Down 이벤트

모든 키를 눌렀을 때 발생한다. 이 때, 문자, 숫자, 특수 문자, enter 키를 눌렀을 때만 연속적으로 발생하고, 나머지의 경우는 한번만 발생함

>> log

KeyDown, KeyUp 이벤트를 활용한 게임 캐릭터 방향 및 달리기 기능

방향키로 움직이며, Shift를 누르면 빨라진다.

START HERE!

좀 더 부드럽게 구현해보기 (feat.Canvas)

방향키로 움직이며, Shift를 누르면 빨라진다.

Input 관련 이벤트

focusin/focusout

이벤트 버블링이 발생한다.

parent div

child div

>> log

focus/blur

이벤트 버블링이 발생하지 않는다.

parent div

child div

>> log

input

요소의 값이 변경될 때마다 발생하며, 이벤트 버블링이 일어난다.

parent div

child div

>> log

change

요소의 값이 변경되고, focusout or blur 처리가 돼야 발생한다.

React에서 onChange 를 프로퍼티 방식처럼 JSX에서 쓰고 있는데, 사실 이건 change 이벤트보다는 input 이벤트 동작과 일치한다.

input과 마찬가지로 이벤트 버블링이 일어난다.

parent div

child div

>> log

Form 관련 이벤트

Resize & Scroll Event

Blur and Custom Click Event

id :

clickTestBtn.onclick = (e) => { checkInputBox.dispatchEvent(new MouseEvent("click")); };