foreachの中にあるのに、なぜli.addEventListner('click'～が問題なく処理されていくのかがよくわかりません。

li.addEventListner('click'～　が処理されている順番はどうなっているのでしょうか？

画面が表示される（foreach内の処理は完了？）
↓
li要素をクリックする
↓
foreach内の li.addEventListner('click'～ から処理開始？（foreachは回さない？）
↓
mainImage.src = image（なぜforeachを回してないのにimageに値があって代入が可能？）

この辺の流れがイマイチわかりません。

お手数ですが教えてもらえると助かります。