委任イベント(イベント委任)

JavaScriptに動的に組み込まれたHTML(DOM)では、イベントリスナーを事前に設定することはできません.
Arrayを受信し、カード形式で画面にリストを描画すると、JavaScriptを使用してHTMLが挿入されます.
イベントリスナーをプリセットできません.
また、イベントレンタル者を別々に指定するのも面倒なことです.
この場合、アクティブな委任を使用できます.

<ul class='list'>
  <li class='card' data-id='1'>
  	<img />
    <h5>card1 title</h5>
    <p>card1 description</p>
  </li>
  <li class='card' data-id='2'>
  	<img />
    <h5>card2 title</h5>
    <p>card2 description</p>
  </li>
  <li class='card' data-id='3'>
  	<img />
    <h5>card3 title</h5>
    <p>card3 description</p>
  </li>
</ul>

上記の構成では、HTMLにはulしかありません.
Liはcardがjavascriptで書かれていると考えています
JavaScriptでレンダリングすると、イベントリスナーを別々に追加できます.
事前にulラベルにイベントリスナーを追加し、liカードと一致する場合、イベントコールバック関数を実行するとより効率的になります.

const list = document.querySelector('.list');

function onClickList(event) {
	let target = event.target;
  	let card = target.closest('li');
  	if(!card) {
     	return; 
    }
  	if(card) {
     	// 실행할 코드 
    }
}

list.addEventListener('click', onClickList);

liにdata-idが格納されているのでevent targetでliを選択してほしい.
実際には、クリックするとサブエレメントが選択されます.
この場合eventtarget.クローゼット(「element」)を使用して、必要な要素を選択できます.

参考文献

ドリームエンコーディングブラウザ101

https://ko.javascript.info/event-delegation