input 관련 이벤트 파헤치기 - input onChange onKeyUp onKeydown

회사에서 value에 따라 style이 변경해야 하는 기능을 가진  input을 만들어야 했는데,

input event를 활용해서 해당 문제를 해결할 수 있었는데요.

정확히 왜 해결되었는지 원론적으로 접근해보고 싶어서 공부한 내용을 적었습니다.

 

input event에 대한 내용은 김맥스 기술 블로그- input 요소 관련 키보드 이벤트 총정리 를 활용했는데 정말 정리가 너무 잘되어있습니다. 김맥스님 감사해요❤️

 

사용 기술 스택 

React 에 antd textarea사용

code sand box 예시에서는 일반 input과 textarea에 이벤트를 걸어보았습니다.

 

 

input의 이벤트

onBlur

요소에 focus가 헤재되었을 때 발생하는 이벤트

 

onFocus

요소에 focus시 발생하는 이벤트

 

onKeyPress 

문자 값을 생성하는 키를 눌렀을 때 발생하는 이벤트 

기기 의존도가 높아 현재는 더이상 사용되지 않습니다.

한글 , 기능키 입려 시 동작하지 않습니다

 

onInput

input의 value 속성 값이 변경될 때 발생하는이벤트

 

onKeyDown

key를 눌렀을 때 발생하는 이벤트

 

onKeyUp

key를 눌렀다가 떼었을때 발생하는 이벤트

 

onChange

html요소가 바뀌었을 때 즉 focus 발생 전과 후를 비교하여 변화가 일어났을 경우 발생하는 이벤트

 

 

input 이벤트 실습

아래와 같이 input에 이벤트를 걸고 모든 것에 console을 찍었는데요! 

아래 순서로 이벤트가 동작하는 걸 확인할 수 있었습니다.

 

✨ onFocus  >>  onKeyDown  >  onKeyPress  >  onInput  >  onChange  >  onKeyUp  > onBlur

 

      <input
        onBlur={onBlur}
        onFocus={onFocus}
        onKeyPress={onKeyPress}
        onKeyDown={onKeyDown}
        onInput={onInput}
        onKeyUp={onKeyUp}
        onChange={onChange}
      />

 

 

알게된 소소한 재미있는 사실들

🤔 한글은 의미있는 글자가 입력되는 시점에  input 이벤트가 두번 발생한다.

"하이"를 입력한다고 할 때 아래와 같이 되는데 한국어는 자음 모음의 조합이 한 글자가 되기 때문에 나온 특이성 같습니다.

1. ㅎ 입력 시 :  onKeyDown  >  onInput  >  onChange  >  onKeyUp 
2. 하 입력시 : onKeyDown  >  onInput  >  onChange  >  onKeyUp 
3. 하ㅇ 입력 시 :  onKeyDown  >  onInput > onInput >  onChange  >  onKeyUp

 

🤔 엔터 키와 같이 동작키를 누르면 keyboard event만 동작한다. (input x)

1. onFocus
2. onKeyDown
3. onKeyPress
4. onKeyUp
5. onBlur

🤔 키를 꾹 누르고 있으면 keyboard event가 반복된다.

1. keydown
2. keypress
3. keydown
4. keypress
5. <<사용자가 키를 놓을 때까지 반복>>
6. keyup

 

직접 확인해보고 싶다면 제가 만든 code sandbox - Event.tsx 파일을 통해 확인해보세요!

 

 

Textarea with character counting - antd@4.20.0-alpha.1 (forked) - CodeSandbox