Вызов функции из .addEventListener () - PullRequest
Новая
       20

Вызов функции из .addEventListener ()

0 голосов
/ 28 марта 2020

В последних двух строках моего кода я вызываю функцию changeColor, но, похоже, она не принимает никаких аргументов. Если бы я попытался написать последние две строки, как показано ниже, я получил бы ошибку. 

button1.addEventListener("click", changeColor(button1);
button2.addEventListener("click", changeColor(button2));

Мой вопрос: Как функция узнает, какую кнопку изменить, если я не нажму ' не могу сказать ему, какой объект в вызове функции? 

const button1 = document.querySelector(".button1");
const button2 = document.querySelector(".button2");

function changeColor() { //<-------------------------------Why is there no parameter neccesary?
  if (this.style.getPropertyValue("--color") === "#111111") {
    this.style.setProperty("--color", "#999999");
  } else {
    this.style.setProperty("--color", "#111111");
  }
}

button1.addEventListener("click", changeColor); //<-----------There is no argument in this function call. Why?
button2.addEventListener("click", changeColor);

Моя теория состоит в том, что это вопрос области видимости, и, возможно, на что указывает ключевое слово "this", но было трудно найти пример, который мне понятен. Мое лучшее предположение состоит в том, что Javascript знает, что я вызываю addEventListener из button1 и button2, а затем передаю имя объекта в changeColor в некоторой форме "скрытого" аргумента.

Если это так, я все еще озадачен, почему мне не нужно включать параметр в объявление функции.

...