이벤트 위임(event delegation)

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에서 렌더링 후 이벤트 리스너를 각각 달아 줄 수 있지만
미리 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를 선택되길 바라지만
실제로 클릭을 하면 그 하위 요소가 선택이 된다.
이럴 경우 event.target.closet('element')로 원하는 element를 선택할 수 있다.

참고 문헌

• 드림코딩 브라우저 101
• https://ko.javascript.info/event-delegation