[miniProjects] 11_Event KeyCodes

11_Event KeyCodes

💻 주제 : 키보드 키를 눌렀을 때 키 버튼과 키코드를 보여줌.

• keydown 메서드 사용.

window.addEventListener('keydown', (event) => {
  insert.innerHTML = `
  <div class="key">
      ${event.key === ' ' ? 'Space' : event.key}
      <small>event.key</small>
    </div>

    <div class="key">
      ${event.keyCode}
      <small>event.keyCode</small>
    </div>

    <div class="key">
      ${event.code}
      <small>event.code</small>
    </div>
  `;
})

• window.addEventListener('keydown', (event) => { ... })를 사용하여 창(브라우저)의 키보드 이벤트에 대한 이벤트 리스너를 등록한다. 이 때, 키 다운 이벤트인 'keydown' 이벤트를 처리한다. 이벤트 발생 시 실행될 콜백 함수를 정의한다. 이 콜백 함수는 event라는 매개변수를 받으며, 키보드 이벤트 객체를 나타낸다.
• 콜백 함수 내부에서는 insert.innerHTML = ... ;를 사용하여 insert 요소의 내부 HTML을 업데이트한다. 즉, 새로운 HTML 코드를 삽입한다.
• HTML 코드 내부에는 세 개의
  요소가 포함되어 있으며, 클래스가 'key'인 요소다. 이 요소들은 키보드 이벤트에 대한 정보를 표시한다.
• 첫 번째 div요소는 ${event.key === ' ' ? 'Space' : event.key}를 사용하여 키보드 이벤트의 키를 표시한다. 공백 키는 'Space'로 표시됩니다. small요소에는 'event.key'라는 텍스트를 표시한다.
• 두 번째 div 요소는 ${event.keyCode}를 사용하여 키보드 이벤트의 keyCode를 표시한다. small요소에는 'event.keyCode'라는 텍스트를 표시한다.
• 세 번째 div 요소는 ${event.code}를 사용하여 키보드 이벤트의 code를 표시한다. small요소에는 'event.code'라는 텍스트를 표시한다.