웹 개발을 하다 보면 실제 사용자가 키보드를 누른 것처럼 키 입력 이벤트를 프로그래밍 방식으로 발생시켜야 하는 경우가 있습니다. 예를 들어 자동화 테스트, 데모 화면 제작, 특정 조건에서 단축키 동작을 재현해야 할 때 유용합니다.
이벤트 핸들러를 활용한 키 입력 시뮬레이션
키 입력 이벤트를 시뮬레이션하는 가장 기본적인 방법은 jQuery의 trigger() 메서드를 사용하는 것입니다. 먼저 대상 요소에 keypress 이벤트 핸들러를 등록한 뒤, 커스텀 이벤트 객체를 생성하여 강제로 이벤트를 트리거하면 됩니다.
아래 예제는 페이지가 로드된 후 2초 뒤에 자동으로 'z' 키 입력 이벤트를 발생시키고, 이를 감지한 핸들러가 알림 창을 띄우도록 구성되어 있습니다.
예제 코드
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
jQuery(document).ready(function($) {
$('body').keypress(function(e) {
alert(String.fromCharCode(e.which));
});
});
jQuery.fn.simulateKeyPress = function(character) {
jQuery(this).trigger({
type: 'keypress',
which: character.charCodeAt(0)
});
};
setTimeout(function() {
$('body').simulateKeyPress('z');
}, 2000);
</script>
</head>
<body>
<p>아무 키나 눌러 보세요</p>
</body>
</html>코드 설명
위 코드의 동작 원리를 단계별로 살펴보겠습니다.
1. 이벤트 리스너 등록: $('body').keypress()를 통해 body 요소에 keypress 이벤트 핸들러를 등록합니다. 이벤트가 발생하면 e.which 속성에 담긴 키 코드를 String.fromCharCode()로 문자로 변환하여 알림 창에 표시합니다.
2. 시뮬레이션 함수 정의: jQuery.fn.simulateKeyPress는 커스텀 플러그인 형태로, 전달받은 문자의 첫 번째 글자를 charCodeAt(0)으로 아스키 코드 값으로 변환한 후 trigger()를 호출합니다.
3. 이벤트 트리거: type: 'keypress'와 which 값을 가진 객체를 trigger에 전달하면, 실제 키보드 입력 없이도 등록된 핸들러가 실행됩니다.
참고 사항
jQuery의 trigger() 방식은 해당 라이브러리에 등록된 핸들러만 실행한다는 점에 유의하세요. 순수 JavaScript로 작성된 리스너까지 포함해 더 사실적인 이벤트를 만들려면 다음과 같이 KeyboardEvent 생성자와 dispatchEvent()를 사용하는 것이 좋습니다.
const event = new KeyboardEvent('keypress', { key: 'z', which: 90, keyCode: 90 });
document.body.dispatchEvent(event);또한 최신 웹 표준에서는 keypress 이벤트가 지원 중단(deprecated) 상태이므로, 새 프로젝트에서는 keydown 또는 keyup 이벤트를 사용하는 것을 권장합니다.