Event delegation

Event bubblingとは?
サブエンティティにイベントが発生すると、イベントはその要素から親要素に渡されます.
イベントキャプチャとは?
サブエレメントにイベントハンドラがある場合、イベントは親エレメントからサブエレメントに渡されます.

<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

イベントキャプチャ:addEventListener()の3番目のパラメータによって{ capture: true }が渡され、イベントキャプチャが適用された要素の親要素からイベントキャプチャがコンソールに書き込まれ、再びイベントバブルで動作します.

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

p clicked
span clicked
div clicked

Event delegation

複数のイベントが委任されている場合、サブエレメントにはそれぞれイベントハンドラが付いていません.親エレメントにイベントハンドラを追加してサブエレメントの制御方法を指定します.
したがって、次のようになります.

レイヤーを動的に追加する場合、ハンドル

を考慮する必要はありません.

上端にイベントハンドルを1つ追加するだけで

Event handler down , memory down , performance up

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