자바스크립트 키보드 이벤트 사용법

자바스크립트에서는 키보드 이벤트를 다룰 수 있습니다. 키보드 이벤트는 사용자가 키보드에서 키를 눌렀거나 떼는 등의 동작을 했을 때 발생합니다. 키보드 이벤트는 keydown, keyup, keypress 이벤트로 나뉘며, 각 이벤트는 다음과 같은 시점에서 발생합니다.

 

사용법

 

keydown: 사용자가 키를 누를 때 발생합니다.

keyup: 사용자가 키를 뗄 때 발생합니다.

keypress: 사용자가 키를 누르고 떼는 동작이 완료될 때 발생합니다.

 

이벤트 발생 시, 해당 이벤트에 대한 정보를 담고 있는 이벤트 객체(event object)가 생성됩니다. 이벤트 객체를 사용하여 사용자가 입력한 키의 정보를 얻거나, 이벤트 발생 시 추가적으로 수행해야 할 작업을 처리할 수 있습니다.

 

keydown 이벤트에서는 눌려진 키의 정보를 가져올 수 있습니다. 예를 들어, 아래 코드는 사용자가 키보드에서 a키를 눌렀을 때 콘솔에 'a key is pressed'를 출력합니다.

 

document.addEventListener('keydown', function(event) {
    if (event.code === 'KeyA') {
    console.log('a key is pressed');
    }
});

 

keyup 이벤트에서는 키보드에서 뗀 키의 정보를 가져올 수 있습니다. 예를 들어, 아래 코드는 사용자가 키보드에서 a키를 뗄 때 콘솔에 'a key is released'를 출력합니다.

 

document.addEventListener('keyup', function(event) {
    if (event.code === 'KeyA') {
    console.log('a key is released');
    }
});

 

keypress 이벤트는 키가 입력되면 발생합니다. 키보드에서 한글이나 스페이스바 같은 일부 키는 keypress 이벤트를 발생시키지 않기 때문에 주의해야 합니다. 예를 들어, 아래 코드는 사용자가 키보드에서 입력한 값이 입력되면 콘솔에 해당 값을 출력합니다.

 

document.addEventListener('keypress', function(event) {
    console.log('key is pressed: ' + event.key);
});

 

이 외에도, 이벤트 객체를 이용하여 사용자가 누른 키의 위치와 상태, Alt, Ctrl, Shift 키의 상태 등 다양한 정보를 얻을 수 있습니다. 이를 이용하여 웹 애플리케이션에서는 키보드 이벤트를 사용하여 다양한 기능을 제공하고 있습니다.