[HTML] INPUT 입력 이벤트 순서

오늘은 HTML FORM INPUT 이벤트에 대해 알아보았다.

 

주로 change 이벤트만 사용해서 다른 이벤트는 쓸 일이 없었는데, 

값이 변경 될 때가 아닌, 값이 변경되기 전/후를 비교해야 하는 일이 생겼고, 때문에 값이 변경되고 난 뒤의 이벤트인 change 외의 이벤트를 찾아봐야 했다.

 

<input/> 이벤트에서 발생할 수 있는 이벤트는 많다. 마우스, 키보드, 복사, 붙여넣기 등이 있다. 이 중 키보드로 입력할 때 발생하는 이벤트들만 적는다.

 

1. focus: input에 클릭이나 tab 등으로 포커스되었을 때 발생한다.

2. keydown: 키를 눌렀을 때 발생한다.

- copy: 복사할 때 발생

- paste: 붙이기할 때 발생

3. keypress: 키를 눌렀을 때 발생하지만 한글이나 기능키는 발생하지 않는 등 예기치 못한 동작이 발생할 수 있다.

4. input: input 값이 달라졌을 때 발생한다.

5. keyup: 키를 떼었을 때 발생한다.

6. change: 포커스가 해제되기 전 값에 변화가 있으면 발생한다.

7. blur: 포커스가 해제된 후 발생한다.

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

 

 

focus 이벤트 동작 시, 현재 input 값을 변수에 저장해 둔 뒤,

input 이벤트 동작 시 focus 이벤트 때 저장한 변수를 사용하여 값을 변경해주도록 했다.