shuffledChoices.forEach( choice => {
    const li = document.createElement('li');
    li.textContent = choice;
    li.addEventListener('click',() =>{
      checkAnswer(li);
    });
    choices.appendChild(li);
　});
}

この順番ですが、htmlを押した際にaddEventlistenerが起こると思ったので

shuffledChoices.forEach( choice => {
    const li = document.createElement('li');
    li.textContent = choice;
    choices.appendChild(li);
      li.addEventListener('click',() =>{
        checkAnswer(li);
      });
  });
}

と記載し、実際に動きました。個人の考えかもしれませんが、なぜEventlistenerをここに置いたか教えていただきたいです。

Eventlistenerは順番関係なくどこでも行けるって考えでは間違っていますか？