JS input, change 이벤트의 차이점

1. input 태그에서 발생하는 이벤트

• input 이벤트
  • 즉시 반응
  • 다양한 변경에 반응 
     
• change 이벤트
  • 포커스가 다른 곳으로 옮길 경우 발생 

 

document.getElementById('ID').addEventListener('input', function(){
  console.log('글자입력중')
});

- 글자를 한글자씩 변화가 생기면 console.log에서 실행이 된다.

 

 

document.getElementById('ID').addEventListener('change', function(){
  console.log('글자입력됨')
});

- 글자를 입력후 input 창에서 벗어나면 실행이 된다.

 

 

-  용도는 무엇일까?

• input 이벤트의 경우
  • 실시간 검색 필터링 효과
  • 글자 제한 수 확인
  • 실시간 피드백이 필요한 경우
     
• change 이벤트
  
  • 제출 전 최종 확인 용도
  • 체크 박스 등등 확인