Почему «скрытый» класс применяется к элементу перед его нажатием?

Question

Это мой JS код:

var btn = document.querySelector("button"); 
btn.addEventListener("click", hide(this, true)); 
function hide(event, reflow) { 
    if(reflow) { 
    document.querySelector(".great").classList.add("hidden"); 
    } 
} 

Может кто-нибудь, пожалуйста, пролить некоторый свет на то, почему это происходит?

Answer 1

@blex правильно объясняет, почему функция выполняется немедленно, но подпись, которую вы видите, как будто вы пытаетесь использовать Function.prototype.call. Вот что я предлагаю использовать:

btn.addEventListener('click', function(event){ hide.call(this, event, true); }); 

Что это делает передать контекст анонимной функции (function(event){...}) к hide() и устанавливает первые два аргумента e и reflow к event и true.

См. MDN MouseEvent, для каких свойств находится объект event.

Answer 2

смотрите здесь.

btn.addEventListener('click', hide(this, true)); 

Вы вызываете метод hide(this, true) явно. метод addEventListener ожидает ссылки на функцию во втором аргументе для вызова при нажатии кнопки. так что вы можете сделать

btn.addEventListener('click', function(){ hide(this, true)); 

Answer 3

На addEventListener линии, вы сразу же выполняете функцию hide (при наличии скобки). Вы можете избежать этого, окружив его с анонимной функцией:

btn.addEventListener('click', function(){ hide(this, true); }); 

Как сказано ниже @Patrick Робертс, это может оказать влияние на то, что this представляет. Я не уверен в этом, поэтому я позволю ему или кому-то объяснить это.