Простой вопрос об использовании функций и их вызове

Question

Довольно базовый c вопрос, но я нигде не могу найти подходящий ответ, так как не уверен, какое слово использовать. Я пытаюсь лучше понять, что здесь происходит, чтобы я не мог повторить эту ошибку. Как вы можете видеть в последней строке, я пытаюсь установить событие onclick, но оно сразу вызывает функцию. Решение состоит в том, чтобы удалить скобки, но что именно это делает? Какая разница между двумя? Спасибо за любую помощь.

let element = document.querySelector("button");

function turnButtonRed (){
  element.style.backgroundColor = "red";
  element.style.color = "white";
  element.innerHTML = "Red Button"; 
}

element.onclick = turnButtonRed();

Answer 1

В операторе element.onclick = turnButtonRed(); вы присваиваете результат вызова turnButtonRed, а не эту функцию. Просто удалите ().

Вот почему. Я отсылаю вас к могущественной Таблице приоритетов операторов !

В вашей строке кода есть два оператора: присваивание и вызов функции. Давайте посмотрим:

• Вызов функции - 20
• Назначение - 3

Мы делаем вещи в порядке приоритета операторов, от высшего к низшему. Итак, что происходит, вы оцениваете вызов функции turnButtonRed() сначала , а затем присваиваете результат обработчику. Это не то, что вам нужно.

Просто удалите вызов функции и назначьте функцию :

 element.onclick = turnButtonRed;

Здесь мы не вызываем функцию. Вместо этого мы назначаем саму функцию в качестве обработчика событий.

Теперь предпочтительный современный способ сделать это - добавить обработчик событий:

 element.addEventListener("click", turnButtonRed);

I оставьте это упражнение для читателя , чтобы выяснить, почему это может быть предпочтительным.

Answer 2

воспринимайте turnButtonRed как переменную.

var turnButtonRed = function(){ return 2 };

Теперь, если вы используете эту переменную, например, для передачи ее в onclick, у вас есть 2 возможности

element.onclick = turnButtonRed; // this is setting onclick to a function
element.onclick = turnButtonRed(); // this is setting onclick to whatever the function returns (2 in this case).

Вы хотите, чтобы onclick был установлен на функцию, а не на результат функции. turnButtonRed() дает вам результат функции, turnButtonRed - сама функция.