이 글에서는 JavaScript 및 jQuery를 사용하여 웹 애플리케이션에서 키보드 이벤트를 처리하는 방법에 대해 설명하려고 합니다.

이벤트 리스너 등록

먼저 jQuery의 keydown() 함수를 사용하여 특정 키의 눌림을 감지할 수 있습니다. 예를 들어, 아래 코드는 Enter 키가 눌렸을 때 handleEnterKey() 함수가 호출되도록 하는 예제입니다.

$(document).keydown(function(event) {
    if (event.which === 13) {
        handleEnterKey();
    }
});

위 코드에서 keydown() 함수는 전체 문서에 대한 키보드 이벤트를 감지하며, 매개변수로 전달된 콜백 함수는 이벤트 객체를 받습니다. event.which 속성은 눌린 키의 코드를 나타내며, 여기서 13은 Enter 키를 나타냅니다.

특정 엘리먼트에 이벤트 리스너 등록

특정 엘리먼트에만 키보드 이벤트 리스너를 등록하려면 jQuery의 on() 함수를 사용할 수 있습니다.

$("#targetElement").on("keydown", function(event) {
    if (event.which === 27) {
        handleCloseModal();
    }
});

위 코드에서 #targetElement는 이벤트를 감지할 대상 엘리먼트의 선택자이며, 여기에서는 해당 엘리먼트에서의 키보드 이벤트를 처리합니다.

keyCode 대신 which 사용

keyCode는 더 이상 권장되지 않으며, event.which를 사용하여 키 코드를 확인하는 것이 좋습니다.

이상으로 jQuery를 사용하여 키보드 이벤트를 처리하는 방법에 대한 간단한 안내였습니다. 여기서는 keydown() 및 on() 함수를 사용하여 이벤트 리스너를 등록하는 방법을 살펴보았으며, event.which 속성을 사용하여 특정 키 코드를 확인하는 방법을 확인했습니다.

더 많은 정보는 jQuery 공식 문서를 참고하세요.