자바스크립트 - 키보드 이벤트 / 포커스 이벤트 (input 태그) /입력 이벤트 / 스크롤 이벤트

 [키보드 이벤트]

  > KeyboardEvent.type
 keydown: 키보드 버튼을 누른 순간
 keypress: 키보드 버튼을 누른 순간
 keyup: 키보드 버튼을 눌렀다 뗀 순간
 
 > KeyboardEvent.key              event객체의 key 프로퍼티
 : 이벤트가 발생한 버튼의 값
 
 > KeyboardEvent.code          event객체의 code 프로퍼티
 : 이벤트가 발생한 버튼의 키보드에서 물리적인 위치

---

키 값은 같지만 코드가 다른 경우 (ShiftRight/Left)

코드는 같지만 키 값이 다른 경우 (a, A)

 

출력값이 변할때만 keypress 이벤트 발생함

esc, shift 같은 기능적인 키가 눌렸을때는 keypress 이벤트 발생하지않음

 

한 가지 키를 계속 누를때 : keydown 이벤트 계속 발생 / keypress  한번만 발생

-> keydown 이벤트를 활용하자 ~

 

---

  [input 태그 다루기]
   
  > 포커스 이벤트
  focusin: 요소에 포커스가 되었을 때
  focusout: 요소에 포커스가 빠져나갈 때
  focus: 요소에 포커스가 되었을 때 (버블링 x)
  blur: 요소에 포커스가 빠져나갈 때 (버블링 x)
  
  > 입력 이벤트
  input: 사용자가 입력을 할 때
 change: 요소의 값이 변했을 때

(요소 포커스 전 후 비교했을때 값이 변하면 발생)  -> 입력이 끝났다는 걸 알려줘야함 

1) 다른 요소를 선택해서 focusout 이 될때

2) Enter를 입력할때

---

[스크롤 이벤트]

웹 문서가 브라우저 창보다 클때 스크롤이 나타남

-> window 객체에 이벤트 핸들러 등록한다 (윈도우 객체가 브라우저 창을 대변하므로) 

 

-> 윈도우 객체의 프로퍼티가 많이 활용됨

 

window.scrollY : 웹문서의 제일 위부터의 위치 반환

-> 위치 별로 요소에 스타일 더하거나 / 스크롤 방향을 감지하는 등 활용 가능

 

무한 스크롤 동작 시 사용

데이터를 한번에 불러오면 서버에 무리가 될 수 있음

1) 스크롤 이벤트 사용 : scrollY가 어느 정도 수준이 되면 데이터 불러오기

2) 하단의 특정 요소가 보이면 데이터 불러오기