[자바스크립트] 키보드 이벤트 처리 (Enter 키)

자바스크립트에서 키보드 이벤트는 사용자가 키보드를 눌렀거나 뗀 때 발생하는 이벤트를 의미합니다. 이러한 이벤트를 사용하여 사용자가 웹 페이지에서 무엇을 하는지 감지하고, 그에 따라 적절한 동작을 수행할 수 있습니다.

 

1. 기본 설명

키보드 이벤트는 다양한 종류가 있습니다. 대표적인 이벤트로는 keydown, keyup, keypress가 있습니다. 이들 이벤트의 차이점은 다음과 같습니다.

• keydown: 사용자가 키를 누를 때 발생하는 이벤트입니다. 이벤트 핸들러가 실행되기 전에 발생합니다.
• keyup: 사용자가 키를 뗄 때 발생하는 이벤트입니다. 이벤트 핸들러가 실행된 후에 발생합니다.
• keypress: 사용자가 키를 누르거나 뗄 때 발생하는 이벤트입니다. 이벤트 핸들러가 실행되기 전에 발생합니다.

이러한 이벤트들은 이벤트 핸들러를 등록하여 사용할 수 있습니다. 이벤트 핸들러는 특정 키보드 이벤트가 발생했을 때 실행되는 함수를 의미합니다. 예를 들어, 다음과 같이 keydown 이벤트 핸들러를 등록할 수 있습니다.

 

document.addEventListener('keydown', function(event) {
  console.log('A key was pressed');
});

위 코드에서는 keydown 이벤트가 발생할 때마다 콘솔에 'A key was pressed' 메시지가 출력됩니다. 이러한 방식으로 키보드 이벤트를 활용하여, 사용자가 특정 키를 누르거나 뗄 때마다 원하는 동작을 수행할 수 있습니다.

 

2. Enter 키 예제

엔터키는 사용자가 입력 필드에서 입력을 완료하거나, 채팅창에서 메시지를 전송하는 등의 동작에 사용됩니다. 따라서 엔터키를 감지하여 적절한 동작을 수행하는 것은 매우 중요합니다.

엔터키를 감지하기 위해서는 keydown 이벤트를 사용할 수 있습니다. 이 이벤트는 키를 누를 때마다 발생하는 이벤트이므로, 사용자가 엔터키를 누를 때마다 이벤트 핸들러가 실행됩니다. 이러한 방식으로 엔터키를 감지하여, 사용자가 입력 필드에서 입력을 완료하거나 채팅창에서 메시지를 전송할 수 있습니다.

아래는 엔터키를 감지하는 예제 코드입니다.

 

const input = document.querySelector('input[type="text"]');

input.addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    // 엔터키를 눌렀을 때 수행할 동작
    console.log('엔터키를 눌렀습니다.');
  }
});

위 코드에서는 input 요소에서 keydown 이벤트를 감지하여, 이벤트 핸들러가 실행됩니다. 이벤트 핸들러에서는 event.key 속성을 사용하여 눌린 키의 값이 'Enter'인지 확인합니다. 만약 눌린 키가 엔터키라면, 콘솔에 '엔터키를 눌렀습니다.'라는 메시지를 출력합니다. 이러한 방식으로 엔터키를 감지하여 필요한 동작을 수행할 수 있습니다.