Логика обратного вызова addEventListener в Javascript
Я слежу за видеоуроком по Javascript, в котором мы узнаем о слушателях событий. Мы написали следующее небольшое веб-приложение, которое позволяет вводить элементы в список:
var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
//Apparently if it is just one parameter it just gets transferred
function inputLength()
{
return input.value.length;
}
//If there is just one parameter it gets transferred
function createListElement()
{
var li = document.createListElement("li");
li.appendChild(document.createTextNode(input.value));
ul.appendChild(li);
input.value = "";
}
// Making sure that it does not add empty strings
function addListAfterClick()
{
if (inputLength() > 0)
{
createListElement();
}
}
//Making sure that it just adds after pressing enter
function addListAfterKeypress(event)
{
if (inputLength() > 0 && event.keyCode === 13)
{
createListElement();
}
}
button.addEventListener("click", addListAfterClick);
input.addEventListener("keypress", addListAfterKeypress);
Я не понимаю, почему функции были названы так:
button.addEventListener("click", addListAfterClick);
input.addEventListener("keypress", addListAfterKeypress);
Вместо этого:
button.addEventListener("click", addListAfterClick());
input.addEventListener("keypress", addListAfterKeypress(event));
Я знаю, что это как-то связано с функциями обратного вызова. Однако я все еще не уверен, как он просто автоматически получает значения параметров, как в искусстве магии.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Когда вы добавляете прослушиватель событий, вы привязываете конкретное событие к функции. Это как сказать браузеру: «Эй, всякий раз, когда на элементе кнопки происходит событие щелчка, не забудьте выполнить функцию addListAfterClick». Для этого вам просто нужно указать имя функции, которая должна быть вызвана, когда это событие произойдет. Если вы добавите () в конце имени функции, вы сразу же вызовете ее (запустите) вместо сохранения в качестве ссылки (обратный вызов) для вызова в будущем.
Я думаю, вам следует пройти это введение, чтобы лучше понимать события.
Функция вызывается так из-за правила синтаксиса прослушивателя событий, которое выглядит следующим образом
element.addEventListener(event, function, useCapture);
всякий раз, когда мы используем прослушиватель событий, вам нужно добавить функцию без (), потому что при использовании () функция будет запущена до того, как произойдет щелчок по событию, чего вы не хотите.
Итак, правильный путь таков:
button.addEventListener("click", addListAfterClick);
и
input.addEventListener("keypress", addListAfterKeypress(event));
неверно, потому что теперь функция внутри addListAfterKeypress не нуждается в доступе к событию, которое использовалось выше, и используется только тогда, когда вам нужно указать браузеру, какая клавиша активирует эту функцию с помощью кода клавиши
Таким образом, если не помещать () в конце имени функции, отправляется ссылка, и параметры каким-то образом отправляются автоматически?
javascript сохраните его на потом, потому что я как слушатель событий внутри JavaScript работает
если ваша функция записи внутри eventlistener с (), тогда она будет выполняться как обычная функция
Функция addListAfterKeypress() уже выполнила свою работу, выше добавлять не нужно
параметр внутри eventlistener, потому что ему не нужны параметры, eventlistener просто выполняет вывод из addListAfterKeypress(), приведенный выше, который является клавишей ввода (потому что код клавиши равен 13)
Потому что тогда функция будет вызвана немедленно, а не будет передана как обратный вызов. например, stackoverflow.com/questions/35667267/…