请解释这个MDN示例

Question

我正在通过MDN文档学习javascript。他们在功能主题上有一个很明显我无法理解的例子。

const textBox = document.querySelector("#textBox");

const output = document.querySelector("#output");

textBox.addEventListener('keydown', (event) => output.textContent = `You pressed "${event.key}".`);

我已经阅读了一些关于键的文档--按函数，我假设它应该为输入的每个字符返回一些值(如果我错了，请纠正我的错误)；但是在MDN上的示例中，它只在我按enter键时返回enter，当我按backspace时返回backspace (而输入框没有其他字符)。我正在移动设备上读这个例子。

Answer 1

关于keydown事件，你几乎是对的。当输入callBack元素被激活或者它能够接收事件时，它应该用每个按键调用#textBox函数(带有#textBoxid的HTML )。这意味着如果没有选择/激活#textBox元素，它将不会侦听任何'keydown‘事件，因此它将不会调用callBack函数：(event) => output.textContent = You pressed "${event.key}".。

keydown是#textBox元素通过addEventListener()方法监听的事件。更清楚的是，addEventListener()方法设置了一个函数，只要将指定的事件传递给目标，就会调用该函数。本例中的目标是带有#textBox id的html元素。

简而言之，您编写的代码将向输入元素添加keydown事件，并在事件发生时调用(event) => output.textContent = You pressed "${event.key}".函数。

您可以在MDN上阅读更多关于addEventListener()的信息。

Answer 2

似乎是有效的，只要你添加适当的html。

​

const textBox = document.querySelector("#textBox");

const output = document.querySelector("#output");

textBox.addEventListener('keydown', (event) => output.textContent = `You pressed "${event.key}".`);

<input id="textBox">
<div id="output"></div>

​