BFE.devでのAI解答例 - JavaScript コーディング問題
117. event delegation

以下はJavaScriptのコード例です。

function onClick(root, predicate, callback) {
  root.addEventListener('click', function(e) {
    let targetEl = e.target;
    
    while (targetEl !== root) {
      if (predicate(targetEl)) {
        callback.call(targetEl, e);
        if (e.stopPropagation) {
          e.stopPropagation();
        }
        if (e.stopImmediatePropagation) {
          e.stopImmediatePropagation();
        }
        return;
      }
      targetEl = targetEl.parentNode;
    }
  });
}

この関数は、root要素にclickイベントが発生した際に、predicate関数に渡した条件を満たす要素がクリックされた場合に、callback関数を呼び出します。ただし、本当のevent listenerは1つだけであり、すべてのイベントがこの1つのevent listenerで処理されます。

また、この関数はevent.stopPropagation()とevent.stopImmediatePropagation()もサポートしています。これらの関数は、イベントのバブリングや同一要素内でのイベント伝播を止めるために使用されます。現在のイベントが停止されると、以降のイベント処理は実行されず、特定の動作がキャンセルされます。