Михал, пока ваш сценарий. Файл js является внешним по отношению к документу HTML, когда вы включаете тег сценария перед импортом всего сценария. 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» или «событие» достаточно описательно, чтобы знать, что функция хочет передать «событие».
В вашей строке кода:
<input type="text" id="type_here" placeholder="New task here.." onkeydown="myFunction(event);">
у вас есть:
onkeydown="myFunction(event);"
, часть «onkeydown» будет срабатывать при каждом нажатии клавиши, при нажатии клавиши она будет издавать «событие» с большим количеством информации, включая ключ, который как нажата. Ваш код говорит - когда кто-то нажимает клавишу, передайте эту информацию (событие) в myFunction (событие).
Вы можете переписать строку кода следующим образом:
<input type="text" id="type_here" placeholder="New task here.." onkeydown="myFunction(theInformationFromTheOnkeydownEvent);">
... строка 'theInformationFromTheOnkeydownEvent' не является фактической информацией о событии, это просто какое-то слово ( s) мы решили показать, что что-то передается в функцию myFunction, onkeydown будет передавать информацию о событии в myFunction, потому что мы поместили текст в круглые скобки. Если мы не ставим между скобками ничего, тогда onkeydown не будет передавать какую-либо информацию в myFunction (), потому что мы явно запретили это, пропустив такой текст: myFunction ()
Представьте себе:
onkeydown = "myFunction (passTheOnkeydownEventOnToMyFunction)" <- передает информацию в myFunction </p>
onkeydown = "myFunction ()" <- не передает никакой информации в myFunction </p>
... слова внутри скобок в этом случае не имеют значения, потому что onkeydown - это функция DOM (да, это функция, и она возвращает информацию о событии), поэтому при вызове она возвращает информацию о событии в то, что вы хотите, в вашем на случай, если он вернет его в myFunction.
Когда вы посмотрите на файл скрипта. 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!');
}
}
Надеюсь, это немного прояснит ситуацию?