[JS] 이벤트 형태

1. 마우스 버튼 이벤트
MouseEvent.button

0: 마우스 왼쪽 버튼
1: 마우스 휠
2: 마우스 오른쪽 버튼

MouseEvent.type
click : 마우스 왼쪽 버튼을 눌렀을때
context.menu: 마우스 오른쪽 버튼을 눌렀을 때
dblclick: 동일한 위치에서 빠르게 두번 클릭
mousedown: 마우스 버튼을 누른 순간
mouseup: 마우스 버튼을 눌렀다 뗀 순간


2. 마우스 이동 이벤트
 
 > MouseEvent.type
 mousemove: 마우스 포인터가 이동할 때
 mouseover: 마우스 포인터가 요소 밖에서 안으로 이동할 때
 mouseout: 마우스 포인터가 요소 안에서 밖으로 이동할 때 
 
 MouseEvent.clientX, clientY
 : 화면에 표시되는 창 기준 마우스 포인터 위치   
 
 MouseEvent.pageX, pageY
 : 웹 문서 전체 기준 마우스 포인터 위치
MouseEvent.offsetX, offsetY
 이벤트가 발생한 요소 기준 마우스 포인터 위치

mouseover와 mouseout에서 자주 쓰는 프로퍼티

 MouseEvent.target
 : 이벤트가 발생한 요소
 MouseEvent.relatedTarget
 : 이벤트가 발생하기 직전(또는 직후)에 마우스가 위치해 있던 요소


3. mouseover / mouseout 과 mouseenter / mouseleave의 차이점

mouseenter와 mouseleave는
1. 버블링이  일어나지 않는다.
2. 자식 요소의 영역을 계산하지 않는다.



 
4. [키보드 이벤트]

> KeyboardEvent.type
keydown: 키보드 버튼을 누른 순간
keypress: 키보드 버튼을 누른 순간
keyup: 키보드 버튼을 눌렀다 뗀 순간

> KeyboardEvent.key
: 이벤트가 발생한 버튼의 값

> KeyboardEvent.code
: 이벤트가 발생한 버튼의 키보드에서 물리적인 위치

* keypress 이벤트는 웹 표준에서는 권장하지않는다. keydown을 사용할 것을 권장한다.
* keypress는 기능키나 영어 외의 문자에는 작동하지 않을 수 있다.




5. [input 태그 다루기]

> 포커스 이벤트
focusin: 요소에 포커스가 되었을 때
focusout: 요소에 포커스가 빠져나갈 때
focus: 요소에 포커스가 되었을 때 (버블링 x)
blur: 요소에 포커스가 빠져나갈 때 (버블링 x)

> 입력 이벤트
input: 사용자가 입력을 할 때
change: 요소의 값이 변했을 때


6. 스크롤 이벤트

window 객체에 이벤트핸들러로 등록하는 경우가 많다.

scrollY 프로퍼티를 많이 활용한다.