input event 발생 순서

input 을 만들고

<input type="text" name="score">

 

이벤트를 만들고 동작을 테스트 해본다

let input = document.querySelector('input[name=score]');
input.addEventListener('focus', function(e) {
    console.log('focus');
});
input.addEventListener('keypress', function(e) {
    console.log('keypress');
});
input.addEventListener('keydown', function(e) {
    console.log('keydown');
});
input.addEventListener('input', function(e) {
    console.log('input');
});
input.addEventListener('keyup', function(e) {
    console.log('keyup');
});
input.addEventListener('change', function(e) {
    console.log('change');
});
input.addEventListener('blur', function(e) {
    console.log('blur');
});

 

input 으로 커서를 이동한 후
키보드를 누르고 있다가 키보드를 떼고 커서를 제거한 경우
아래 순서로 이벤트가 발생한다

1 focus           // 마우스 커서를 input 으로 이동했을 때
2 keydown         // 키보드를 눌렀을 때
3 keypress        // 키보드를 눌렀을 때
4 input           // 키보드를 눌렀을 때
5 keydown (167)   // 키보드를 누르고 있는 동안 계속 이벤트가 발생한다
6 keyup           // 키보드에서 손을 뗐을 때 (누르지 않는다)
7 change          // 커서가 폼 밖으로 이동하고 값이 변경된 경우
8 blur            // 폼에서 커서가 사라졌을 때