[JavaScript] keyup, keydown(feat. keypress)

프로젝트를 진행하면서 keyup, keydown을 많이 사용하게 되어서 한 번 정리를 해보았다.

keypress

현재 MDN에 keypress를 검색하면 Deprecated라고 나온다. 더 이상 keypress 이벤트는 지원되지 않는다라는 의미다. Browser compatibility를 보면 아직 지원을 하는 브라우저들이 많지만 추후 최신 브라우저에서는 사용되지 않을 가능성이 높기 때문에 사용하지 않고 개발하는 것이 좋다.

그리고 그 대신에 사용가능한 이벤트를 위와 같이 추천해준다.

keydown

사용자가 키보드를 누르면 바로 이벤트가 발생한다.

event.isComposing

한국어처럼 한글자를 완성하는데 여러 번의 keydown이 발생하는 경우에는 중간에 이벤트가 실행되는 경우가 생긴다. 그럴때는 keyup으로 이벤트를 변경하거나 event.isComposing을 사용하면 해결된다.

input.addEventListener('keydoen', (e) => {
  if (e.isComposing) {
    return;
  }
  if (e.keyCode === 13) {
    onAdd();
  }
})

keyup

사용자가 누른 키보드에서 손을 떼면 이벤트가 발생한다.

참고자료

MDN keypress event

드림코딩엘리 브라우저 101 강의