중요한 이벤트 위임✨

<script>
	const lis = document.querySelectorAll('li');
    
    lis.forEach(li => {
    	li.addEventListener('click',() => {
        	li.classList.add('selected');
            });
        });
</script>

• 만약 ul(부모)태그 안에 li(자식)태그가 1000개가 있는데 li 태그를 click할 때 컬러를 바꿔주는 event를 작성하고 싶다면
  모든 li 태그를 돌면서 eventListener를 달아주는 것은 아주 비효율적이다

<script>
	const ul = document.querySelector('ul');
    
    ul.addEventListener('click',(e) => {
    	if(e.target.tagName == 'LI'){
        	e.target.classList.add('selected');
        }
	});
</script>

• 이벤트 위임을 이용하여 부모 태그에 한번만 eventListener를 달아주는 것이 효율적이다
• 버블링 때문에 (모든 이벤트가 위로 올라오기 때문에) 그걸 이용해서 이벤트 위임이 가능하다
• 버블링, 캡쳐링은 브라우저에서 이벤트가 발생하는 원리, 동작하는 방식, 그 자체에 대한 용어이고, 이벤트 위임은 그것을 이용한/활용한 기술 (테크닉)이다.