按下键盘键时的JS功能？

问题描述

有没有办法在按下并释放按键时运行JavaScript函数？

例如，当时，如何运行函数 example（）键是否被按下？我以前见过这些例子，但它们很长很杂乱，我无法让它们工作。像这样的东西只会进入< head> ？

$中的< script> b $ b

解决方案

第1部分：在哪里放置脚本块？

，就像是一个页面帮助功能（也许你想捕捉F1？），那么你可以把脚本块放在脚本中的< head> 标签中。但是如果你想捕获一个DOM元素，那么你必须在DOM元素出现后执行代码（因为脚本被解释为发现了，如果DOM元素还不存在，选择器引擎就找不到它如果这没有意义，那么应该找到一篇文章）。

但是，您可以考虑以下事项：今天好的JavaScript程序员导师建议您在页面末尾加载所有JavaScript 。您可能想要在文档头加载的唯一东西是像jQuery这样的库，因为它们被广泛缓存，特别是如果您使用的是CDN版本的jQuery，因为它通常不会影响加载时间。

因此，这回答了我在哪里放置代码块，在< head> ？中的问题。 ：否。最后。

现在，关于如何实际捕捉按键，我们分三部分来完成：

第2部分：捕获窗口上的所有键盘事件：

$ p $ < html>
< head>
< title>等等等等< / title>
< metawoot，yay StackOverflow！>
< / head>
< body>
< h1>所有标题< / h1>
< div>所有div< / div>
< footer>所有的......页脚？< / footer>
< script>

/ *最后一个例子替换了这一块* /

function keyListener（event）{
//我们想要做的任何事情都在这个块中进行
事件=事件|| window.event; //捕获事件，并确保我们有一个事件
var key = event.key || event.which || event.keyCode; //找到被按下的键
// MDN更好：https：//developer.mozilla.org/en-US/docs/DOM/event.which
if（key == = 84）{//这是'T'
doThing（）;
}
}

/ *最后一个例子替换这个例子* /

var el = window; //我们确定了我们想要在
上定位一个侦听器的元素//记得在按下键盘上的IE9之前，IE无法捕获窗口上的内容。

var eventName ='keypress'; //知道你想要哪一个，这个页面可以帮你搞清楚：http://www.quirksmode.org/dom/events/keys.html
//这里有另一个很好的参考页面：http：// unixpapa.com/js/key.html
//因为您希望捕获产生角色
的东西//您需要按键事件。

//我们希望绑定IE或非IE，
//所以我们必须测试是否支持.addEventListener，
//如果不是，假设我们在IE上。
//如果两者都不存在，那么就搞砸了，但我们没有在其他情况下报道。
if（el.addEventListener）{
el.addEventListener（'click'，keyListener，false）;
} else if（el.attachEvent）{
el.attachEvent（'on'+ eventName，keyListener）;
}

//在这一点上，您已完成注册函数，开心监控

< / script>
< / body>
< / html>


第3部分：捕获特定元素上的所有键盘事件

这一行： var el = window; //我们确定了我们希望将侦听器作为目标的元素也可能是 var el = document.getElementByTagName（'input'）; 或某些其他文件选择器。第4部分：一个'优雅'的解决方案

这个例子仍然适用于这种方式。
  var KeypressFunctions = []; 
 KeypressFunctions ['T'.charCodeAt（0）] = function _keypressT（）{
 //为T 
做特定的事情} 
 KeypressFunctions ['t'.charCodeAt（0 ）] = function _keypresst（）{
 //为t 
做特定的事情} 
 //你在这里得到的想法
 
 function keyListener（event）{
 //不管我们想要做什么，都会在这个块中执行
 event = event || window.event; //捕获事件，并确保我们有一个事件
 var key = event.key || event.which || event.keyCode; //找到被按下的键
 // MDN更好：https：//developer.mozilla.org/en-US/docs/DOM/event.which 
 KeypressFunctions [key]。呼叫（）; //如果有定义的函数，运行它，否则不要
 //我也使用了.call（），所以如果你想要，你可以提供一些参数，或者将它绑定到一个特定的元素，但是这取决于您。 
} 
  

所有这些做了什么？

$ b

KeypressFunctions 是一个数组，我们可以用不同的值填充，人类可读。数组中的每个索引都以'T'.charCodeAt（0）完成，它给出字符代码（ event.which || event.keyCode 看起来很熟悉？），将索引位置放入我们为其添加函数的数组中。所以在这种情况下，我们的数组只有两个定义的索引值， 84 （T）和 116 （t）。我们可以把它写成 KeypressFunctions [84] = function ... ，但这样做的人读不太容易理解，代价是可读性更高。总是先为自己编写代码，然后机器通常比你所称赞的更聪明。不要试图用逻辑来打败它，但是当你稍微优雅时，不要编写过多的if-else块。

>是这样的，当这被称为匿名函数，或作为一个调用堆栈的一部分（它会，有一天），那么你可以识别该函数。这是一个非常方便的习惯做法，确保所有潜在匿名函数仍然被命名，即使他们在别处有专有名称。再次，良好的JavaScript导师建议的事情可以帮助人们;-)。

请注意，您可以轻松做到：

<$ p $函数doThing（）//在我们的代码之前的一些预定义的函数

var KeypressFunctions = [];
KeypressFunctions ['T'.charCodeAt（0）] = doThing
KeypressFunctions ['t'.charCodeAt（0）] = doThing

，然后对于T或t，运行doThing函数。请注意，我们只是传递了函数的名称，并没有试图通过 doThing（）来运行函数（这是一个巨大的差异如果你打算做这样的事情，这是一个很大的暗示）

---

The reason for the _keypressT and _keypresst is so that when this gets called as an anonymous function, or as part of a callstack (it will, one day) then you can identify the function. This is a really handy practice to get into the habit of, making sure that all potentially anonymous functions still get "named" even though they have a proper name elsewhere. Once again, good javascript mentors suggest things that help folks ;-).

Notice you could just as easily do:

function doThing() //some pre-defined function before our code

var KeypressFunctions = [];
KeypressFunctions['T'.charCodeAt(0)] = doThing
KeypressFunctions['t'.charCodeAt(0)] = doThing

and then for either T or t, the doThing function is run. Notice that we just passed the name of the function and we didn't try to run the function by doThing() (this is a HUGE difference and a big hint if you're going to do this sort of thing)

---

Part 5: jQuery:

Because the emphasis today is on jQuery, here's a block you can put anywhere in your app after the jQuery library has loaded (head, body, footer, whatever):

<script>
  function doTheThingsOnKeypress(event){
    //do things here! We've covered this before, but this time it's simplified
    KeypressFunctions[event.which].call();
  }

  $(document).on('keypress','selector',doTheThingsOnKeypress);
  // you could even pass arbitrary data to the keypress handler, if you wanted:
  $(document).on('keypress','selector',{/* arbitrary object here! */},doTheThingsOnKeypress);
  //this object is accessible through the event as data: event.data
</script>

If you're going to use the KeypressFunctions as from before, ensure they are actually defined before this.

这篇关于按下键盘键时的JS功能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！