JavaScript Drum Kit-2_(script 시작)

1. 키보드를 눌렀을 때 자바스크립트랑 연동이 되는지 확인

 

<script>

//키보드를 눌렀을 때 이벤트 발생, (e)는 키보드이벤트를 가르킨다

window,addEventListener('keydown', function(e){ 
    console.log(e);
})

</script>

 

코드 실행 -> 키보드를 누르면 아래의 화면이 출력된다

 

키보드 이벤트란?

키보드 이벤트 타입

키보드 이벤트(Keyboard Event)는 사용자가 키를 누르거나 키를 놓을 때 발생합니다. 키를 누를 때는keydown타입 이벤트가 발생하고, 키를 놓을 때는keyup타입 이벤트가 발생합니다. (예전에는keypress라는 이벤트 타입도 사용되었으나, 현재는 deprecated되어 권장되지 않으므로 다루지 않겠습니다.)

키보드 이벤트는 DOM 상에서 창(window)이나 문서(document), 또는 특정 엘리먼트(element)에서 발생할 수 있습니다. 예를 들어, window에서 발생하는keydown이벤트를 처리하려면 다음과 같이 이벤트 처리를 위한

콜백(callback) 함수를 설정해주면 됩니다.

 

window.onkeydown = (e) => console.log(e);

addEventListener함수를 이용해도 같은 효과를 낼 수 있습니다.

window.addEventListener("keydown", (e) => console.log(e));

 

https://www.daleseo.com/js-key-events/

 

 

 

콜백(callback) 함수

코드를 통해 명시적으로 호출하는 함수가 아니라, 개발자는 단지 함수를 등록하기만 하고,

어떤 이벤트가 발생했거나 특정 시점에 도달했을때 시스템에서 호출되는 함수.

이벤트 핸들러 처리로 많이 사용된다.

 

 

 

 

 

2. Keyboard Event 속에 keycode 가 잘 동작하는지 확인

 

<script>

window,addEventListener('keydown', function(e){  
    console.log(e.keyCode); //키보드이벤트 속에서 keycode만 찍히게 한다.
})

</script>