document.addEventListener（'keydown'，console.log（“ test”）））;不能按预期工作

Question

我从javascript开始，只是想运行一个简单的测试以查看是否检测到我的按键按下。

我正在使用Chrome控制台测试我的js输出。

<script> 
document.addEventListener('keydown', console.log("test"));  
</script>

我期望每次在网页上按下一个键时，控制台上都会打印“测试”。但是，加载页面时，我得到的只是一个“测试”。然后，当我按下按键时，什么也没发生。 我不明白什么？

Answer 1

该动作需要一个函数，因此您需要将其包装为一个函数。

document.addEventListener('keydown', function() {console.log("test")}); 

Answer 2

您需要将log命令包装在回调函数中。否则，它只会在页面加载后立即执行（如您所注意到的）。如果将该函数传递给addEventListener命令，它可以将其保存以供以后使用，并且仅在事件发生时才运行该函数。

document.addEventListener('keydown', function (e) { console.log("test") });  

Answer 3

document.addEventListener(...)方法使用一个函数作为第二个参数。 您可以将console.log包装在一个函数中：

document.addEventListener('keydown', function() { console.log("test"); });

或声明一个单独的函数并调用：

function LogIt(ev) {
  console.log("test");
}

document.addEventListener('keydown', LogIt);

您可以参考 https://www.w3schools.com/jsref/met_document_addeventlistener.asp

建议使用一个相对较新的运算符。箭头功能。 类似于C＃中的委托。但是，如果在生产环境中使用浏览器兼容性，则可能需要查看它的兼容性。如果只是学习，无后顾之忧！ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions