2. 키보드에 의한 event
-keyup : 키보드를 누르고 뗄 때
-keydown : 키보드를 누를 때
-keypress
*var doc=document; 를 통해 document를 변수 doc에 넣어놨다.*
<HTML>
<CSS>
<화면>
1) input태그 변수에 넣기
2) keyup
키보드를 누르고 떼는 순간. popup창 띄운다 (어떤 키든 상관없음)
↓ 팝업창
3) 매개변수
-매개변수 event : 어떤 키를 눌렀는지에 대한 정보
- 함수의 첫번째 매개변수 : 해당 이벤트에 대한 정보. (e나 event를 변수명으로 많이 사용한다)
-자동으로 변수가 들어온다.
- event console 출력
↓ 누르는 키가 뜨고 키에 대한 정보가 뜬다
(한글을 눌러도 영어로 뜸)
4) key code : 키보드 값마다 갖고있는 특정 숫자.
위의 console창을 늘려 정보를 보면 다음과 같이 key code가 나와있다.
- console창에 key code도 띄우기
*key code값은 google에 검색하면 쉽게 얻을 수 있다. *
*keycode vs ASCLL code*
1) keycode는 대소문자 구분 x, ASCLL code는 구분
2) key code는 F1, F2.. 등의 값이 있음. ASCLL code는 없음
* key code를 이용해 누른 키보드 값에 따라 원하는 행동을 실행할 수 있다 *
엔터의 key code : 13
↓ 실행 결과
- input에 막 치다가 엔터를 누르면 위의 nemo 태그에 내용 넣기.
(nemo 태그는 미리 nemo 변수에 넣어놨다. )
↓ 실행결과
5) 방향키 (좌우) 를 누르면 누르는 방향으로 nemo 태그를 이동하게 하기
* window : 어디서든지 누르면 이동
*-> 의 key code : 39
*<- 의 key code : 37
연속해서 방향키 누르기.
*key down : 누를 때 실행된다. *
계속 누르고 있다가 뗄때
keyup : 뗄 때 실행이 되므로 끊어지고 조금씩 간다
keydown : 누를 때 실행이 되므로 계속 간다.
더 다양한 이벤트 : https://www.w3schools.com/js/js_events_examples.asp
'프론트엔드 > JavaScript' 카테고리의 다른 글
| <JS> 유저의 행위(event) (4) input form (0) | 2017.08.11 |
|---|---|
| <JS> 유저의 행위(event) (3) 스크롤 (0) | 2017.08.11 |
| <JS> 유저의 행위(event) (1) 마우스 (0) | 2017.08.11 |
| <JS> DOM제어 예제1. 버튼 마다 다른함수 주기 (0) | 2017.08.10 |
| <JS> DOM제어하기(2) 자식태그, 부모태그, 형제태그 (0) | 2017.08.10 |