event.keyCode deprecated, then event.key, event.code 는 무슨값을 가질까? (키보드 (KeyBoard) event handler: compositionstart compositionupdate compositionend)

# event.keyCode deprecated, then event.key, event.code 는 무슨값을 가질까? (키보드 (KeyBoard) event handler: compositionstart compositionupdate compositionend) event.keyCode 로 단축키 설정하고 이것저것 했었는데 이미 몇년전에 deprecated 되었다네요. 에서 키보드가 눌렸을때의 각 값들을 잘 보여주고 있긴 한데, 한영키나 다른 나라 (중국, 일본 정도?) 키보드에서도 잘 동작하도록 하려면 테스트가 필요할거 같아서 본 글을 작성합니다. Korean, Japanese, Chinese typing handled. event.data on input, compositionstart, compositionupdate, compositionend. ## PH

• 2024-04-06 : First posting.

## TOC ## event.keyCode, event.key, event.code 확인

## 참조 ```[#pre-code-key-test.linenums.lang-js] ```/ jQuery 의 on event listener 로 묶으면 e.data 가 undefined 로 반환됨. 왜 그런지는 모르겠음 ㅡ,.ㅡ;;; jQuery 도 함정이 좀 있구나. 참조: . ```[.linenums.lang-js] $("#textarea-key-test").on("compositionstart compositionupdate compositionend input", (e) => { $("#result").prepend(`e.data=${e.data} on e.type=${e.type}<br />`); }); ```/ 바로 위 처럼 코드를 짜면 제대로 된 데이터가 안나옴. ## jQuery code 손수 수정. ``` ce.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" ") ```/ 위 부분을 아래와 같이 고쳐봤음. ``` ce.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu compositionstart compositionupdate compositionend".split(" ") ```/ 아래는 테스트 결과. Shift+F5 로 캐시를 지우고 새로고침 하시길... (그래도 안고쳐지네 =ㅂ=ㅋ 망했다.)

## RRA

1. https://www.toptal.com/developers/keycode
2. MDN :: References > Web APIs > KeyboardEvent > key #result
3. kipid's blog :: Mouse click 들 (left, right, wheel, wheel up, wheel down, back, forward) 구분해내기