[JS] input 이벤트 - change, input, cut, copy, paste

input 이벤트


1. change

  • 요소 변경이 끝나면 발생
  • 텍스트 입력인 경우 포커스를 잃을 때 발생
  • select, input type=checkbox, input type=radio는 선택 값이 변경된 직후에 이벤트가 발생

 

2. input

  • 어떤 방법으로든 값을 수정할 때마다 발생
  • , 키같이 값을 변경시키지 않는 키보드 입력이나 동작에는 반응하지 않음

 

3. cut, copy, paste

  • 각각 값을 잘라내기·복사하기·붙여넣기 할 때 발생
  • ClipboardEvent 클래스의 하위 클래스
  • event.preventDefault()를 사용해 기본 동작을 막을 수 있음
  • 텍스트뿐만 아니라 모든 것을 복사·붙여넣기 할 수 있음

 

정리

이벤트 설명 특이사항
change 값이 변경될 때 이벤트 발생 텍스트 입력의 경우 포커스를 잃을 때 실행
input 텍스트가 입력될 때마다 이벤트 발생 change와 달리 즉시 실행
cut,
copy,
paste
잘라내기·복사하기·붙여넣기 할 때 이벤트 발생 브라우저 기본 동작을 막아 이벤트 실행을 막을 수 있음. event.clipboardData 프로퍼티를 사용하면 클립보드에 저장된 데이터를 읽고 쓸 수 있음

 

 

 

참고

728x90