イベント委譲(event delegation)とは、子要素ごとに1つずつリスナーを付ける代わりに、共通の祖先要素に単一のリスナーを付け、イベントバブリングを使って(event.target から)実際にどの子要素が操作されたかを特定する手法です。
js
.().(
li.(, handle));
.().(, {
li = e..();
(li) (li..);
});
<li> をクリックすると、イベントは li → ul → body → document と**バブリング(伝播)**します。したがって <ul> 上のリスナーは、その配下のいずれの <li> 子要素からのクリックも受け取り、e.target がクリックされた正確な要素を教えてくれます。closest("li") は target から上方向にたどって意図した要素を見つけます(内側の要素へのクリックも処理できます)。
<li> には新しいリスナーが不要です。親がすでに処理しているからです。バブリングに依存するため、バブリングしないイベント(focus、blur — 代わりに focusin/focusout を使う)には機能しません。これはまさに React が内部で使っている手法です(アプリ全体に対してルートのリスナーを1つ持つ)。