이벤트의 순서 (onKeyPress, onKeyDown, onKeyUp, onChange)

문제 발견 상황

검색창에서 입력 후 스페이스바를 누르면 태그를 추가할 수 있는 기능을 만들고자 했다.

 

아래처럼 onChange 이벤트로 input의 value를 저장하고 있었고, onKeyPress 이벤트를 통하여 value를 tagList 배열에 등록하고, input value값을 리셋시켰다. 문제가 없을 것이라 예상했다.

그런데, 이상하게 스페이스바를 누르고 난 뒤, term의 값이 지워져있을 것이라 예상하였지만, 완전히 지워지지않고 스페이스바를 한번 누른 여백이 input에 남아있었다. 

 

 

왜 이런 현상이 생긴걸까?

이벤트가 발생순서가 다르기 때문이다. 값이 입력되는 순간이 키를 누르는 순간이 아니고, 키보드의 키를 뗀 순간인 것이다.

 

onKeyPress vs onKeyDown vs onKeyUp vs onChange

위의 이벤트들을 동작에다가 콘솔을 찍어서, 우선순위를 알아보자

onKeyDown -> onKeyPress -> onChange -> onKeyUp 순서대로 작동하는 것을 볼 수 있었다. 키보드의 동작을 생각해보면 왜 이렇게 될 수 밖에 없는지 느껴질 것이라 생각한다.