keydown
원문 링크 
http://api.jquery.com/keydown/
개요 : "keydown" JavaScript 이벤트를 바인딩하거나 요소에 이벤트를 발생시킵니다.
- .keydown( handler(eventObject) )
- handler(eventObject) 이벤트가 발생되면 실행될 기능
- .keydown( [eventData], handler(eventObject) )
- eventData 이벤트 핸들러에 전달될 데이터 집합
- handler(eventObject) 이벤트가 발생되면 실행될 기능
- .keydown()
이 함수는 두 개의 인자를 갖는 .bind('keydown', handler) 와 .trigger('keydown') 함수의 줄임 표현입니다.
keydown 이벤트는 유저가 키보드를 누르는 순간 요소에 이벤트를 발생시킵니다. 이 이벤트는 포커스를 가질 수 있는 요소에만 발생시킬 수 있습니다. 포커스가 가능한 요소들은 브라우져별로 다양하게 구성됩니다. 그러나 대부분의 form 요소들은 포커스를 가질 수 있어 해당 이벤트를 발생시킬 수 있습니다.
간단한 예를 보겠습니다.
<form> <input id="target" type="text" value="Hello there" /> </form> <div id="other"> Trigger the handler </div>
이벤트를 input 필드에 바인딩 시키겠습니다.
$('#target').keydown(function() {
alert('Handler for .keydown() called.');
});input 필드에 포커스를 위치 시키고 키보드를 누르면 알림창이 나타납니다.
.keydown() 이벤트를 인자없이 수동으로 발생시키려면 :
$('#other').click(function() {
$('#target').keydown();
});이번에는 "Trigger the handler" 부분을 클릭합니다. 위와 마찬가지로 알림창이 나타납니다.
키 누름을 어디서든 감지할 필요가 있다면 (예를들어, 페이지에 글로벌 단축키를 구현하는 것과 같은), document 객체에 바인딩하면 아주 유용합니다. 이 이벤트는 버블링이 되기 때문에, 명시적으로 중단을 하지 않는다면 DOM의 최상위 까지 전달이 되는 것입니다.
어려운 번역이지만 요는 document에 이 이벤트를 바인딩하면 언제 어디서나 키보드 누름을 감지할 수 있다는 것입니다.
눌려진 키를 확인하려면, event 객체를 다룰수 있어야 합니다. 브라우져가 이 정보를 담고 있으면, 안정적으로 키 코드를 찾을 수 있도록 jQuery가 .which 속성을 표준화 시켜 줍니다. 이 코드는 키보드의 키에 해당하고, 스페셜 키인 화살표 키도 포함됩니다. 실제 텍스트를 잡아내기 위해서는, .keypress() 함수를 사용하는 것이 조금 더 나은 선택일 것입니다.
덧붙여 설명드리면, 키보드의 키에는 모두 특정 값이 매핑되어 있습니다. 예로 Enter키는 숫자로 13이죠. event.keyCode 라는 속성값을 사용하면 키보드의 모든 키값을 알아낼 수 있습니다. 그 부분을 표현해 주는 글입니다.
예 제
keydown 이벤트의 여러 속성값들을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
fieldset { margin-bottom: 1em; }
input { display: block; margin-bottom: .25em; }
#print-output {
width: 100%;
}
.print-output-line {
white-space: pre;
padding: 5px;
font-family: monaco, monospace;
font-size: .7em;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form>
<fieldset>
<label for="target">Type Something:</label>
<input id="target" type="text" />
</fieldset>
</form>
<button id="other">
Trigger the handler
</button>
<script type="text/javascript" src="http://http://api.jquery.com/scripts/events.js"></script>
<script>
var xTriggered = 0;
$('#target').keydown(function(event) {
if (event.keyCode == '13') {
event.preventDefault();
}
xTriggered++;
var msg = 'Handler for .keydown() called ' + xTriggered + ' time(s).';
$.print(msg, 'html');
$.print(event);
});
$('#other').click(function() {
$('#target').keydown();
});</script>
</body>
</html>미리보기
아주 많은 이상한 문자들이 나타납니다. 결과에 나타난 값들을 event 객체로 모두 사용할 수 있습니다. 우악 이게 뭐야~. 저도 첨엔 그랬습니다. 근데 걍 그렇구나라고 넘어가심 됩니다.
위 결과 중에 잘 보시면 keyCode라는 속성에 대한 값이 있습니다. 그 값이 그 키의 상수값입니다. 심심하심 확인해 보셔요.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API - load(), 로드되면 발생하는 이벤트 (0) | 2012.01.04 |
|---|---|
| jQuery API - live(), 이벤트 바인딩하기 (0) | 2011.12.26 |
| jQuery API 정복 - keyup(), 키를 눌렀다 뗄때 (0) | 2011.12.26 |
| jQuery API 정복 - keypress(), 브라우져의 키 누름 이벤트 (0) | 2011.12.26 |
| jQuery API 정복 - hover(), 마우스 오버 이벤트 (0) | 2011.12.26 |
| jQuery API 정복 - focus(), 요소에 포커스 주기 (0) | 2011.12.13 |
| jQuery API 정복 - event.timeStamp, 이벤트 사이의 시간 (0) | 2011.12.13 |
| jQuery API 정복 - event.target, 이벤트가 발생한 요소 (2) | 2011.12.13 |