<input type='text'/> 의 이벤트를 잘 몰랐습니다.

옛날 input 태그의 onChange이벤트를 배우면서 키보드 이벤트에 대해 공부했었다. onKeyDown, onKeyPress, onKeyUp 이렇게 세 이벤트를 배웠고 그게 다인줄 알았다.

 

그래서 static한 html 페이지의 input태그에 이벤트를 걸 때, 저 셋 중 onKeyPress를 많이 썼던 것 같다. 그래서 회원 가입 페이지에도 쓰고 로그인 페이지에도 쓰고 하는데, 꼭 한글만 쓸 수 있다던가, 숫자만 쓰게하는 validation을 걸면 깜빡거리면서 보이면 안되는 문자열이 보였다가 사라지곤 했다. 그래서 해결하려다 못하고 넘어간 기억이 있는데,

 

onInput이라는 이벤트의 존재를 알게 되었다. input type='text' 에서 키보드의 입력시에 onKeyDown -> onKeyPress -> onInput -> onKeyUp 이런 순으로 이벤트가 발생하는 것이다!

 

그래서 onInput 이벤트에서 정규식으로 입력된 값을 validation을 하게되니 깜빡이지도 않고 깔끔하게 작업을 할 수 있었다.

 

정말 기초적인 이벤트이지만, 내가 모르는 것을 하나 더 알게 되고 그 앎이 나를 더 겸손하게 만드는 것 같았다. 

 

'아 나 나름 2년 가까이 프론트 개발했는데, 아직도 모르는게 너무 많구나. 이런 기본적인 것도 모르면서 너무 오만하다' 라는 생각? 을 하게 만드는 순간이었다.