7.1.3 키보드(Keyboard)와 관련된 이벤트 핸들러 속성
웹환경에서 요사이 스마트폰이 대두되면서 새롭게 조명되고 있는 터치스크린을 통한 입력을 제외하고 마우스와 더불어 입력장치로 주로 사용하는 키보드와 관련된 이벤트와 해당 이벤트가 발생하면 처리해주는 이벤트 핸들러 속성을 정리하면 다음과 같습니다.
|
이벤트 핸들러 속성 |
설명 |
|
onkeydown |
키보드의 자판키가 눌려졌을 때 발생하는 keydown 이벤트 처리 |
|
onkeypress |
키보드의 자판키가 눌려지고 올라올 때 발생하는 keypress 이벤트 처리 |
|
onkeyup |
눌려진 자판키가 올라올 때 발생하는 keyup 이벤트 처리 |
그래서 이벤트의
발생 순서는 keydown -> keypress -> keyup 의 순으로 발생하며 상황에
따라 keydown, keyup이 반복될 수 있습니다. 이러한
상황은 하나의 자판을 이용한 입력이 아닌 Shift, Alt, Ctrl, Fn 키 등과 같은 특수키와
함께 쓰일 경우 발생할 수 있습니다.
keydown, keypress, keyup 이벤트는 거의 모든 브라우저에서 지원되지만 해당 이벤트 객체의 keyCode값이 표준화가 되지 않아서, 즉 브라우저마다 코드가 달라서 keyCode값에 따른 처리를 수행할 때는 브라우저마다 구분하여 코드를 작성해줘야 하는 불변함이 존재합니다. 그래서 현재 표준화가 진행중입니다.
이제 간단하게 keydown, keypress, keyup 이벤트에 대하여 알아볼까요? 메모장을 열어서 다음과 같이 코드를 작성합니다.
<!DOCTYPE
HTML>
<html>
<head>
<title>keyboard event 예제 </title>
<script
type="text/javascript">
function kpress() {
alert("keypress 이벤트 발생");
}
function kdown() {
alert("keydown 이벤트 발생");
}
function kup() {
alert("keyup 이벤트 발생");
}
</script>
</head>
<body>
<img src="flower2.jpg" /><br
/>
장소를 입력하세요.
<br />
<input type="text"
name="txtPlace" onkeypress="kpress()"
onkeydown ="kdown()"
onkeyup="kup()" >
</body>
</html>
“keyboardEvent.html”로 저장하고 IE9로 연결한 후 “장소를 입력하세요.” 밑의 Input 요소에 “k”를 입력할 경우 다음과 같이 나타납니다.
위와 같이 keydown 이벤트만 IE9에서 캡쳐되는데 Firefox를 이용하여 “장소를 입력하세요.” 밑의 Input 요소에 “k”를 입력하면 동일한 작업에 대해 다음과 같이 조금 다르게 결과가 출력됩니다.
Firefox를 이용하여 보니 조금 전에 설명한 Keyword 이벤트
발생 순서에 대해서 이해가 조금 될 것입니다. 이렇게 IE9,
Firefox 2개의 브라우저를 이용해서 설명하는 이유는 브라우저별로 이벤트를 처리하는 방법이 다르다는 점을 얘기하고 싶었습니다.
이상으로 키보드 관련 이벤트에 대해서는 이 정도로 하고 보다 깊숙한 내용을 공부하고자 하는 분들은 “http://
http://www.w3.org/TR/DOM-Level-3-Events/ “을 참고해보시면 좋을 것 같습니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 JavaScript에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 7.2 Event Method를 이용한 이벤트 처리 (0) | 2013.08.06 |
|---|---|
| 7.1.4 폼(Form)과 관련된 이벤트 핸들러 속성 (0) | 2013.08.06 |
| 7.1.2 마우스(Mouse)와 관련된 이벤트 핸들러 속성 (0) | 2013.08.06 |
| 7.1.1 window와 관련된 이벤트 핸들러 속성 (0) | 2013.08.06 |
| 7. 이벤트(Event)와 이벤트 핸들러(EventHandler) (0) | 2013.08.06 |