如何在 Web UI 中使用 Javascript 键盘事件

Question

我对使用 JS 事件感兴趣，例如右\左箭头、空格键等。 想知道什么是正确的方法。我想在此类用户交互中滑动照片、使 DIV 出现等。

我想到了 jQuery 的可能实现，例如 http://api.jquery.com/event.which/ 虽然我不确定这是最好的方法。

以下是此类 UI 实现的两个很好的示例 （他们是如何做到的？） http://www.thesixtyone.com ;
http://www.pictorymag.com/showcases/summer-jobless

我是更多的是一个 C# 人，正在寻找正确的方向来深入研究。

Answer 1

如果您已经在使用或计划使用 jQuery，那么利用 which 并不是一个坏主意。如果你看一下这个例子，它就会告诉你具体如何做。将光标放在此处的文本字段中，然后按您感兴趣的键，即向左箭头。 keydown: 中显示的数字是您要查找的代码。

现在，当您编写自己的函数时，您可以将 keydown 绑定到 document 并监听正确的按键。从那里，您可以根据按下的键来调度某些行为。

$(document).bind('keydown', function (e) {
    var code = e.which;
    switch (code) {
        case 39:
            // code to execute when right arrow is pressed
            some_right_arrow_action();
            break;
        case 37:
            // code to execute when left arrow is pressed
            some_left_arrow_action();
            break;
    }
    return;
});

您询问 Pictorymag.com 等网站如何处理此功能。这是 Pictorymag.com 所做的（我已经解压了他们的代码以使其更易于阅读）：

$(document).keydown(function (e) {
    switch(e.keyCode) {
        case 39:
        case 74:
            node = s[++curr];
            if(node) {
                $.scrollTo(node,800);
            } else {
                curr = s.length-1;
            }
            break;
        case 37:
        case 75:
            node = s[--curr];
            if (node) {
                $.scrollTo(node, 800);
            } else {
                curr=0;
            }
            break;
    }
});