返回值:jQuerykeydown(handler(eventObject))

为 "keydown" 事件绑定一个处理函数,或者触发元素上的 "keydown" 事件。

这个函数的第一种用法是 .bind('keydown', handler) 的快捷方式,第二种用法是 .trigger('keydown') 的快捷方式。

当用户第一次按下一个按键时,会在这个元素上触发 keydown 。这个事件可以附加给任何元素,但是只有可以获得焦点的元素才能触发这个事件。不同的浏览器中,可聚焦的元素略有不同,但表单元素总是可以获得焦点,所以这个事件可以放心的用在这些元素上。

举例来说,请看下面的HTML:

<form>
  <input id="target" type="text" value="Hello there" />
</form>
<div id="other">
  Trigger the handler
</div>

事件处理函数可以绑定在输入框上:

$('#target').keydown(function() {
  alert('Handler for .keydown() called.');
});

现在,当插入点在这个输入框内部时,按下一个按键,那么弹出对话框中就会显示下面的文字:

Handler for .keydown() called.

我们也可以在点击另一个元素时手动触发这个事件:

$('#other').click(function() {
  $('#target').keydown();
});

在代码执行后,如果你点击 Trigger the handler 将同样会弹出上面的消息。

如果需要捕获在任意位置的按键事件(例如要在页面上实现全局的快捷键),那么可以把这个行为附加到 document 对象上去。由于事件冒泡,所有的按键事件都会沿着各自的DOM树冒泡到 document 对象,除非被明确的制止。

要确定哪个按键被按下了,我们可以检测传递给事件处理函数的 event object 。由于不同的浏览器使用不同的属性来存储这个信息,所以jQuery将它们标准化成 .which 属性,以便我们能可靠地使用它来获取按键代码。这个代码与键盘上的按键一一对应,包括方向键等特殊键。如果要捕获实际输入的文本, .keypress() 可能是个更好的选择。

示例:

当按键按下时,显示传递给 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="jquery.min.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').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>
演示: