Почему на итерации n (n>1) addEventListener срабатывает n раз?

Question

[ctacua]

function startGame() {
    // const circlesList = document.querySelectorAll('.circle')
    board.addEventListener('click', (event) => {
        if ( event.target.classList.contains('circle') )
        {
            alert (gameCounter)
            let element = event.target.getAttribute('data-num')
            console.log (':', gameCounter, element)
            if ( gameCounter == element){
                event.target.style.backgroundColor = 'green'
                scoreCount.innerText = ++score

                // if (gameCounter == circlesCount) {
                // console.log ('+', gameCounter, element)
                gameCounter++
                if ( circlesCount - gameCounter == 0) {
                    console.log ('goood', gameCounter, circlesCount)
                    board.innerHTML = ''
                    circlesCount = circlesCount + 1
                    gameCounter = 0
                    createCircle(circlesCount)
                } 

            }else {
                // console.log ('-', gameCounter, element)
                // event.target.style.backgroundColor = 'red'
            }
            
        }        
    })
      
}

В этом участке, после 1й итерации, по нажатию на круг addEventListener (а может и не он) срабатывает n раз , где n это текущая итерация.

Смысл игры в том что бы последовательно повторять появления кружков нажимая на них.

Вот тут пример https://jsfiddle.net/ctacua/0w7tmrgd/1/

Answer 1

[Егор Живагин]

C каждым вызовом startGame() вешается новый обработчик событий
В самом обработчике, при клике, есть вызов функции createCircle()
В createCircle() вызывается startGame()
C каждым вызовом startGame() вешается новый обработчик событий

Итого: у вас уже два обработчика одного и того же события