**我已经解决了这个问题，但我想了解它是如何工作的(只是出于好奇)。我已经搜索这个问题很长时间了，但没有找到有关此问题的正确信息来源。请不要给我 1990 年网站的外部链接。 **
基本上，我想在用户单击输入按钮时调用一个函数。我想将有关按下哪个按钮(在我的 HTML 中)的信息传递给外部 script.js 文件中的函数，并检查它是否是“Enter”按钮，以便我的程序可以继续执行下一个指令。我发现了一个叫做“事件访问”的东西，它确实有效，但解释太可怕了，它有效，但我不知道为什么。这是代码。
function myFunction(e) {
if (e.keyCode == 13) {
alert('It works!');
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>To-do list</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="entryText">
<h1>Good evening!</h1>
<h2>This is to-do list app written in plain javascript :)</h2>
<h2>Type your task and click enter on your keyboard</h2>
</div>
<div id="input-container">
<input type="text" id="type_here" placeholder="New task here.." onkeydown="myFunction(event);">
</div>
<script src="js/script.js" defer></script>
</body>
</html>最佳答案
当您在将整个 script.js 代码导入 HTML 文档之前包含 script 标记时，您的 script.js 文件位于 HTML 文档外部。因此，可以公平地说，下面的示例是浏览器如何解释代码的(您甚至可以这样编写):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>To-do list</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="entryText">
<h1>Good evening!</h1>
<h2>This is to-do list app written in plain javascript :)</h2>
<h2>Type your task and click enter on your keyboard</h2>
</div>
<div id="input-container">
<input type="text" id="type_here" placeholder="New task here.." onkeydown="myFunction(event);">
</div>
<script>
function myFunction(e) {
if (e.keyCode == 13) {
alert('It works!');
}
}
</script>
</body>
</html>代码myFunction(e)采用单个参数，在您使用字母“e”来表明您的函数采用一个参数的情况下。我们倾向于使用一些东西来表明我们期望传递给函数的内容，在本例中我们期望的是“事件”，有些人会这样编写函数
- myFunction(事件)
- myFunction(e)
1 和 2 是相同的，但编程社区普遍认为“e”代表“事件”——当您整天键入代码时，缩短和缩写单词是有意义的，这样您就可以编写代码更快，你可以放任何你想要的东西，比如:
- myFunction(东西)
...但是，如果您试图阅读某人的代码，那么这并不是很有帮助，因为“e”或“事件”的描述性足以知道该函数想要传递一个“事件”。
在您的代码行上:
<input type="text" id="type_here" placeholder="New task here.." onkeydown="myFunction(event);">
你有:
onkeydown="myFunction(event);"
每次按下一个键时，“onkeydown”部分都会触发，当按下一个键时，它将发出一个“事件”，其中包含大量信息，包括按下的键。您的代码是说 - 当有人按下某个键时，将该信息(事件)传递到 myFunction(event) 上。
您可以像这样重写代码行:
<input type="text" id="type_here" placeholder="New task here.." onkeydown="myFunction(theInformationFromTheOnkeydownEvent);">
...字符串“theInformationFromTheOnkeydownEvent”不是实际的“事件”信息，它只是我们选择的一些单词来显示某些内容正在传递给 myFunction 函数，onkeydown 将传递事件信息到 myFunction 因为我们在括号之间包含了一些文本。如果我们没有在括号之间放置任何内容，那么 onkeydown 不会将任何信息传递给 myFunction()，因为我们已经通过省略这样的文本明确告诉它不要这样做:myFunction()
想象一下:
onkeydown="myFunction(passTheOnkeydownEventOnToMyFunction)"<- 将信息传递到 myFunction
onkeydown="myFunction()"<- 不将任何信息传递到 myFunction
...在这种情况下括号内的单词并不重要，因为 onkeydown 是一个 DOM 函数(是的，它是一个函数，并且它返回事件信息)，所以当它被调用时，它将返回事件信息给你想要它，在你的情况下它会将其返回到你的 myFunction。
当您查看 script.js 文件和 myFunction 代码时，您决定将“e”放入括号内，您可以选择“event”或“eventData”。唯一重要的是，您在整个 myFunction 代码块中使用相同的字符串，下面的三个示例工作相同，并且可以与您的 HTML 代码一起使用，我刚刚更改了括号之间的“单词”(有些比其他更具描述性) ):
function myFunction(e) {
if (e.keyCode == 13) {
alert('It works!');
}
}
function myFunction(event) {
if (event.keyCode == 13) {
alert('It works!');
}
}
function myFunction(thing) {
if (thing.keyCode == 13) {
alert('It works!');
}
}
function myFunction(eventData) {
if (eventData.keyCode == 13) {
alert('It works!');
}
}我希望这能让事情变得更清楚一些？
关于javascript - 如何将有关事件的信息传递给 JavaScript 函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60081971/