[Javascript] input 입력 이벤트 순서 총정리

Form 요소 중 하나인 input은 change, input, keypress 등 글자를 입력할 때나 하고 난 뒤 발생하는 이벤트들이 많습니다. 어떤 것이 먼저 일어나는 지 알아야 글자를 입력할 때 특정 단어를 지우거나 추가하는 등의 처리를 할 수 있습니다. 그래서 이 글을 통해 이벤트들이 어떤 때에 발생하고 어떤 이벤트가 먼저 실행되는지 다뤄보도록 하겠습니다.

Input 입력 이벤트들 미리보기

input의 이벤트

<input />에서 발생할 수 있는 이벤트는 많습니다. 마우스, 키보드, 복사붙이기 등 나열하면 엄청 많아지는데요. 여기서는 키보드로 입력할 때 발생하는 이벤트들만 몇 가지 나열해보겠습니다.

위 순서대로 발생합니다. keydown을 하거나 복사붙이기를 했을 때에야 input의 value값이 들어가고 이후 input과 change 이벤트들이 발생합니다.

input 이벤트를 이용해보기

그러면 이 이벤트 순서를 통해 해볼 수 있는 것들이 있겠죠? 예를 들어, 값이 변하면 p태그에 해당 값을 보여주고 영어를 입력했을 때엔 숫자로 바뀌게 하고 싶다고 해보겠습니다. 그러면 이에 대한 이벤트는 다음과 같이 쓰면 될겁니다.