Event delegation

Event bubbling이란?
하위 엘리먼트에 event가 발생할 때 그 element부터 시작해서 상위요소까지 event가 전달되는 방식.
Event capturing이란?
하위 엘리먼트에 event handler가 있을 때 상위 element부터 event가 발생하기 시작해서 하위 element까지 event가 전달되는 방식

<div>
  <p>
    <span>텍스트</span>
  </p>
</div>

document.querySelector('span').addEventListener('click', () => console.log('span clicked'));
document.querySelector('p').addEventListener('click', () => console.log('p clicked'));
document.querySelector('div').addEventListener('click', () => console.log('div clicked'));

Event bubbling:

span clicked
p clicked
div clicked

Event capturing: addEventListener()의 3번째 인자로 { capture: true }를 전달하면 클릭한 element의 상위요소 중 event capturing이 적용된 엘리먼트부터 콘솔에 찍히고 그 다음부터는 다시 event bubbling 방식이 동작.

document.querySelector('p').addEventListener('click', () => console.log('p clicked'), true);

p clicked
span clicked
div clicked

Event delegation

이벤트 위임은하위 엘리먼트들이 여러개 있을 때, 하위 엘리먼트들에 각각 이벤트 핸들러를 달지 않고 상위 엘리먼트에 이벤트 핸들러를 달아 하위 엘리먼트들을 제어하는 방식이다.
이것으로 인해 :

• 동적으로 엘리먼트를 추가할 때마다 핸들러를 고려할 필요가 없음
• 상위 엘리먼트에 하나의 이벤트 핸들러만 추가하면 된다
• Event handler down, memory down, performance up

<ul onclick="alert(event.type + '!')">
    <li>첫번째</li>
    <li>두번째</li>
    <li>세번째</li>
</ul>