IT 수업 9주차 (17) 이벤트 처리 (KEY)

 

● KEYUP

키를 누르다가 뗐을 때 이벤트를 감지하는 코드이다. 

 

 

누른 키가 출력되는 코드이다.

console.log('keyup...', event.keycode); 를 추가하면 입력한 값을 콘솔에 출력하도록 할 수 있다.

 

 

 

단점은 영문의 대문자와 소문자를 구별하지 못한다는 것이다. 

이렇게 입력하면 대문자 A의 숫자만 나오고 소문자와 구별하지 못하며 shift도 같이 출력되는 것을 볼 수 있다.

 

이번에는 입력한 값의 숫자를 바로 나타내는 방법이다.

 

 

 

 

 

 

● keydown

키를 눌렀을때 이벤트 발생한다.

keydown 역시 대소문자를 구분하지 못한다.

 

 

 

 

 

 

 

● keypress

keypress는 대소문자를 구별하며 shift를 기능적인 부분으로 인식하지 않아 대소문자로 구별 가능하다.

 

shift가 출력되지 않는다.

 

 

 

 

 

 

이번에는 애니메이션에 keydown을 적용시켜 볼 것이다.

 

document.querySelector();  : 사용할 해당 요소 찾기, 
                                              주의 : 그 선택자를 가진 요소가 여러개일 수 있음 그때는 querySelectorAll을 사용하면 됨

 

이전에 css animation에서 만들어 놓은 ball 을 가져와서 추가해볼 것이다.

 

이렇게 하면 방향키를 눌렀을 때 공이 움직이는 애니매이션이 적용된다.