forEachの処理内のli.addEventListenerがどう動くか説明してほしい

クリックイベントがどのように登録されて処理されているのか説明しています。
2020年3月30日
ユーザー

お世話になります。

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

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

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

そもそもli.addEventListenerのliは

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

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

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

この回答を見るにはプレミアムプランへの登録が必要です

プレミアムプランとは?

このレッスンの質問と回答(9)