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