onChange, onInput 차이

onChange

input에서 포커스가 벗어났을 때

input에 입력된 값이 이전과 다르면 onChange event 발생.

 

onInput

input에 값이 변경될 때마다 onInput event 발생.

 

예시

input text가 두 글자 이상일 떄, 버튼 색상이 활성화 된다면?

 

onChange 👉 두 글자를 입력하고 마우스로 다른곳을 클릭했을 때 버튼 색상 변경

onInput 👉 두 글자를 입력하는 순간 버튼 색상 변경