[JavaScript] e.switch 이벤트 처리 정리

e.switch는 jQuery 이벤트 객체(e)에서 어떤 키가 눌렸는지 확인할 때 쓰는거!

 

1. 기본 사용법

키보드 이벤트 처리할 때 이렇게 씀:

$(document).on('keydown', function(e) {
    switch (e.which) {  // e.keyCode도 됐었는데 이제 deprecated 됐다고 함
        case 13:  // Enter key
            submitForm();
            break;
        case 27:  // ESC key
            closeModal();
            break;
    }
});

 

 

2. 자주 쓰는 키 코드값들

이거 자주 까먹어서 정리해둠:

• Enter: 13
• ESC: 27
• Space: 32
• Left Arrow: 37
• Up Arrow: 38
• Right Arrow: 39
• Down Arrow: 40
• Delete: 46

 

3. 실제 사용 예시

모달 닫을 때:

$('#myModal').on('keydown', function(e) {
    switch (e.which) {
        case 27:  // ESC
            $('#myModal').hide();
            break;
    }
});

 

 

폼 제출할 때:

$('#searchInput').on('keydown', function(e) {
    switch (e.which) {
        case 13:  // Enter
            e.preventDefault();  // 이거 안하면 두 번 실행될 수 있음!
            searchForm.submit();
            break;
    }
});

 

 

4. 주의사항 (삽질한 것들...)

1. preventDefault() 잊지 말기

// ❌ 이렇게 하면 form이 두 번 제출될 수 있음
case 13: searchForm.submit();

// ⭕ 이렇게 해야 안전
case 13:
    e.preventDefault();
    searchForm.submit();
    break;

 

2. break 꼭 넣기

// ❌ break 빼먹으면 의도치 않게 다음 케이스도 실행됨
case 37: movePrev();
case 39: moveNext();  // 이것도 실행됨!

// ⭕ break 꼭 넣자
case 37: 
    movePrev();
    break;
case 39:
    moveNext();
    break;

 

✅ 메모

1. e.which 값 외우려고 하지 말고 그냥 여기다 메모해두기
2. preventDefault() 습관화하기
3. break 빼먹지 않기
4. 키 이벤트는 모바일에선 안 먹을 수 있으니 주의

이제 이벤트 처리할 때 여기 보고 복붙해야지... 🤓