[JS] addEventListener 'click' wykonuje się w trakcie deklaracji

Question

Witam wszystkich, niedawno zacząłem się uczyć JSa i juz zaczynają się moje pierwsze problemy. Chodzi o to, że robię grę kółko i krzyzyk i chciałem dodać funkcję 'click' dla kazdego przycisku w pętli for na początku programu. Niestety program zamiast nasłuchiwać wykonuje funkcje na kazdym przycisku w trakcie dodawania listenera.

const buttons = [...document.querySelectorAll('.dataHolder')];
let turn = 1;

for(let i = 0; i< 9; i++)
{

    buttons[i].addEventListener('click', move(buttons[i]));

}

function move(event)
{
    
    if(turn % 2 === 0){

        event.innerText = "X";
    }
    else{

        event.innerText = "O";

    }

turn++;
}

Domyślam się, ze przyczyną jest jakiś głupi błąd, takze proszę wszystkich o pomoc. :)

Answer 1

Przeanalizuj

const buttons = [...document.querySelectorAll('.dataHolder')];
let turn = 1;

for(let i = 0; i< buttons.length; i++)
{

buttons[i].addEventListener('click', move,false);

}
function move()
{
if(turn % 2 === 0){

this.innerText = "X";
}
else{

this.innerText = "O";

}

turn++;
}

 

Comments

Nie miałem czasu napisać komentarz.

1.Jako parametr przekazujemy nazwę funkcji bez jej wywołania. (wywołanie powoduje natychmiastowe działanie funkcji, a ty chcesz chyba wywołać ją po kliknięciu)

2. Jako max iteracji  użyj długości tablicy (buttons.length) zamiast na sztywno  i< 9 będzie bardziej uniwersalnie. 

3. this wskazuje aktualnie kliknięty element

---

Zadziałało, dzięki wielkie :) Jeszcze tylko spytam za co odpowiada false w listenerze?

---

Jeśli jego ostatnim argumentem jest true procedura obsługi zdarzeń jest ustawiona dla fazy przechwytywania, jeśli jest false to procedura obsługi zdarzenia ustawiona dla fazy propagacji. 

źródło

Answer 2

A coś takiego:

 buttons[i].addEventListener('click', function() { move(i); });