お世話になります。

li.addEventListener('click', ...がimages.forEach()の処理の中に記述されているかと思います。

繰り返し処理の中にイベントが設定されていることに違和感があり、「サムネイルがクリックされた時にどこから処理が始まるのだろう？」と思い、Chromeのデベロッパーツールで挙動を確認してみましたところ、クリック直後にli.addEventListener('click', ...から処理が始まりました。

この挙動に関連して下記をお教え頂けますでしょうか。

そもそもli.addEventListenerのliは

const img = document.createElement('img');

で定義されて初めて意味を持つと思いますが、「サムネイルがクリックした段階」ではliが定義されていないのに動作するのはなぜでしょうか？

イベントオブジェクト（言葉が正確ではないかもしれませんが、よくeで表す変数）に対してli.addEventListener('click', ...であれば理解できるのですが、定数liをそのまま使っているのに動作する理由がよくわかりませんでした。