[JS] 이벤트3 : 마우스 / 키보드 / 폼 이벤트

마우스 이벤트

el.addEventListener('click', h)       // 클릭했을 때
el.addEventListener('dblclick', h)    // 더블클릭했을 때
el.addEventListener('mousedown', h)   // 버튼을 누르고있을 때
el.addEventListener('mouseup', h)     // 버튼에서 뗄 때
el.addEventListener('contextmenu', h) // 우클릭했을 때 (preventDefault와 함께 활용)

el.addEventListener('mousecenter', h) // 포인터가 위에 있을 때
el.addEventListener('mouseleave', h)  // 포인트가 밖으로 나갈 때
el.addEventListener('mousemove', h)   // 포인터가 움직일 때

el.addEventListener('wheel', h)       // 휠 버튼이 회전할 때

키보드 이벤트

const h = event => {
  if (event.key === 'Enter') {
    console.log(event.target.value) // enter 치기 전 문자들 출력
  }
}

inputEl.addEventListener('keydown', h)    // 키를 누를 때
inputEl.addEventListener('keyup', h)      // 키를 뗄 떼

한글(CJK 문자) 입력시 이중으로 출력됨
-> CJK 문자가 처리되고 있는 경우 event.isComposing = true
-> 처리가 완료된 경우일 때(false일 때)만 문자를 출력

const h = event => {
  if (event.key === 'Enter' && !event.isComposing) {
    console.log(event.target.value)
  }
}

포커스 & 폼 이벤트

inputEl.addEventListener('focus', h)   // 포커스를 얻을 때
inputEl.addEventListener('blur', h)    // 포커스를 잃을 때
inputEl.addEventListener('input', h)   // 값이 변경되었을 때
inputEl.addEventListener('change', h)  // 상태가 변경되었을 때
formEl.addEventListener('submit', h)  // type="submit" 버튼을 선택했을 때
formEl.addEventListener('reset', h)   // type="reset" 버튼을 선택했을 때