javascript - JS/JQuery 关于按键的正确使用

Question

我正在努力创建一个更易于访问的导航，特别是想使用确定是否使用按键。虽然我想弄清楚为什么这对我不起作用，但我也想知道执行相同操作的几种方法之间的区别。这些方法是:

$('ul li a').on('keypress', function(e){...});

& $('ul li a').keypress(function(e) {...});

& $('ul li a').bind('keypress', function(e) {...});

如果有的话，有什么区别吗？对于这种情况是否有“正确”的使用方法？不管怎样，他们都没有真正为我工作。我在我编写的整个脚本中设置了控制台日志，当控制台记录脚本加载时，它会检测到按键按下，但是它不会检测到按下的返回键，整个脚本如下所示:

$('ul li a').on('keypress', function(e){
   if(e.keyCode==13){ // return / enter key
       console.log("Return Key Pressed");
   }
   return false;
});

谢谢!

** 编辑 **

我从来没有发现为什么返回键(或向下箭头)不起作用，也不会触发控制台中的 keydown 事件，但我确实发现空格键是可访问性的最佳方法，最终结果如下:

   $('ul li a').on('keypress', function(e){
        if ((e.keyCode || e.which) == 32) { // spacebar
            ... script ... 
            return false;
        }
    });

Answer 1

• 在内部，.bind 直接映射到当前版本的 jQuery 中的 .on。 (.live 也是如此。)因此，如果您使用 .bind 代替，则会产生微小但实际上微不足道的性能影响。

  但是，.bind 可能随时从 future 版本中删除。没有理由继续使用 .bind，而完全有理由选择 .on。

如果你查看$.fn.bind的源代码，你会发现它只是on的重写函数:

function (types, data, fn) {
    return this.on(types, null, data, fn);
}

• 对于keypress功能，我不推荐它，因为它仅适用于现有元素；如果运行 keypress 后元素仍存在，则不会处理新元素。

  您可以使用委托(delegate):

  $(document).delegate('ul li a','keypress',function(event){
        //........
  })