JavaScript - 문제 미리보기
문제 722
hard
다음 이벤트 처리 코드의 실행 순서와 최종 결과로 올바른 것은?
```html
```
```javascript
let log = "";
function inputHandler() {
log += "INPUT ";
console.log("Input event fired");
}
function changeHandler() {
log += "CHANGE ";
console.log("Change event fired");
}
```
사용자가 입력 필드에 "Hello"를 타이핑한 후 다른 곳을 클릭했을 때의 결과는?
정답: C
이벤트 실행 순서:
1. `oninput` 이벤트: 사용자가 키보드로 글자를 입력할 때마다 실시간으로 발생
1) "H" 입력 → INPUT 이벤트
2) "e" 입력 → INPUT 이벤트
3) "l" 입력 → INPUT 이벤트
4) "l" 입력 → INPUT 이벤트
5) "o" 입력 → INPUT 이벤트
6) 총 5번의 INPUT 이벤트 발생
2. `onchange` 이벤트: 입력 필드의 포커스가 벗어날 때 (다른 곳 클릭) 발생
1)사용자가 다른 곳을 클릭 → CHANGE 이벤트 1번 발생
최종 결과: `log = "INPUT INPUT INPUT INPUT INPUT CHANGE "`
핵심 차이점:
1) `oninput`: 실시간 입력 감지 (타이핑할 때마다)
2) `onchange`: 값이 변경되고 포커스를 잃을 때만 발생
이는 실시간 검색 기능(`oninput`)과 폼 검증(`onchange`)에서 각각 다르게 활용됩니다.
💡 학습 팁
이 문제를 포함한 JavaScript 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.