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