키보드 이벤트 함수 onKeyDown/onKeyUp/onKeyPress를 비교해보자
onKeyDown
키를 눌렀을 때 이벤트 발생
즉, 키를 입력하면 이벤트 발생 후 문자가 입력된다.
onKeyUp
키를 눌렀다 놓았을 때 이벤트 발생
즉, 키를 입력하면 문자 입력 후 이벤트가 발생된다.
onKeyPress
onKeyDown과 이벤트는 같다.
비교 |
2) onKeyPress는 ASCII값이기 때문에 shift, ctrl, backspace, tab, 한/영 등의 키를 인식하지 못한다.
예제 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script> function keyevent() { var keycode = event.keyCode; alert("키값 : " + keycode); } </script> </head> <body> <table> <tr> <td>onKeyDown</td> <td><input type="text" onkeydown="javascript:keyevent(this);"></td> </tr> <tr> <td>onKeyUp</td> <td><input type="text" onkeyup="javascript:keyevent(this);"></td> </tr> <tr> <td>onKeyPress</td> <td><input type="text" onkeyPress="javascript:keyevent(this);"></td> </tr> </table> </body> </html> | cs |
다음과 같은 코드 작성 시 아래와 같은 화면을 볼 수 있다.
자, 먼저 onKeyDown은 이벤트 발생 후 문자가 입력된다고 했는데, 과연 그런지 확인해보자!
onKeyDown 오른쪽에 있는 텍스트박스에 g키를 입력해보자
자 이렇게 g 키값에 해당하는 안내창을 띄우는 이벤트가 먼저 발생된다.
안내창의 확인 버튼을 누르면 텍스트박스에 g 문자가 입력된다.
이렇게 onKeyDown은 이벤트가 먼저 발생된다는 것을 확인했다.
그렇다면 onKeyUp은 어떨까?
순간적이라 캡처하지는 못했지만, 이렇게 g 문자가 먼저 입력되고 그 후 바로 이벤트가 발생된다.
마지막으로 onKeyPress를 확인해보자.
onKeyDown과 같이 이벤트가 먼저 발생된다.
그러나 onKeyDown, onKeyUp과는 다른 결과를 보여준다.
세 개의 텍스트박스 모두 같은 g 키를 입력했는데
onKeyDown과 onKeyUp의 키값은 71이고, onKeyPress의 키값은 103이다.
이렇게 위에서 설명했던, 다른 키값을 가진다는 것을 확인했다.
'프로그래밍 > JavaScript ' 카테고리의 다른 글
| [JavaScript] onclick에서 return false;의 의미 (0) | 2019.04.14 |
|---|---|
| [JavaScript] this 인자 전달 onclick/href (0) | 2019.04.14 |
| [JavaScript] append (스크립트단에서 문자열 생성 후 입력) (0) | 2017.02.07 |
| [JavaScript] 웹 페이지를 다시 표시하려면 웹 브라우저에서 이전에 전송한 정보를 다시 전송해야 합니다. (1) | 2017.02.07 |
| [JavaScript] 오늘 날짜 (년, 월, 일) 및 날짜 비교 new Date() NaN (2) | 2017.02.07 |
