委任イベント

委任イベント

委任イベントとは、親要素の中性子要素のイベントを処理する方法です.複数の類似の要素を処理する必要がある場合は、各要素にイベントハンドラを割り当てる必要はありません.親要素にイベントハンドラを割り当てるだけで、複数の要素を同時に処理できます.
イベント委任には、次のアルゴリズムが使用されます.
コンテナにプロセッサを割り当てます.
Handlerの事件.targetを使用して、イベントが発生した要素を決定します.
イベントが必要な要素で発生したと判断した場合、イベントが処理されます.
似ているが異なる値を持つリストがあり、リスト内のアイテムをクリックする場合は、要素に色イベントを指定する必要があります.

<ul>
	<li>빨강색</li>
    <li>노랑색</li>
    <li>파랑색</li>
 </ul>

各liにクリックして色を変更できるイベントを指定することで、簡単に実装できます.

    <script>
      function changeColor(target) {
        target.style.color = "pink";
      }
    </script>
    <ul>
      <li onclick="changeColor(this)">빨강색</li>
      <li onclick="changeColor(this)">노랑색</li>
      <li onclick="changeColor(this)">파랑색</li>
    </ul>

ただし、各要素にイベントを割り当てるのではなく、すべてのイベントを親にキャプチャするハンドラを使用して実行できます.

    <ul id="listParent">
      <li>빨강색</li>
      <li>노랑색</li>
      <li>파랑색</li>
    </ul>
    <script>
      function changeColor(target) {
        target.style.color = "pink";
      }
      let targetElement = document.getElementById("listParent");
      targetElement.addEventListener("click", function (event) {
        let element = event.target;
        if (element.tagName != "LI") return;
        changeColor(element);
      });
    </script>

これにより、リスト項目が数百個増えても、タスクを簡単に作成できます.イベントの名前や属性が変更された場合は、定義された関数を変更するだけで簡単に維持できます.
しかし、上記のように、仕事をする上で注意しなければならないことがあります.
ターゲット要素に他の要素がネストされ、非ターゲット要素のネストされた要素でイベントが発生した場合、上記の関数は正常に発生しません.(element.tagNameは非LIのネスト要素になります.)

elem.closest(selector)

:selectorに一致するelem親要素の中で最も近い親要素を返します.上のコードでは、イベントが発生した要素から始め、最近のターゲット要素を上に探します.
上記のコードを追加すると、次のように記述できます.

 <ul id="listParent">
      <li><strong>빨강색</strong></li>
      <li><strong>노랑색</strong></li>
      <li><strong>파랑색</strong></li>
 </ul>
 <script>
      function changeColor(target) {
        target.style.color = "pink";
      }
      let targetElement = document.getElementById("listParent");
      targetElement.addEventListener("click", function (event) {
        let element = event.target.closest("li");
        console.log(element.tagName);
        if (!element) {
          return;
        } else {
          changeColor(element);
        }
      });
 </script>

クリックイベントがstrongタグで発生しても、最近のliタグに戻って正常に処理できます.

に注意

currentTargetとtargetは異なります.CurrentTargetはクリックイベントを持つ親要素を指し、targetは実際にイベントが発生した要素を指す.

ソース:
この文章はJAVASCRIPT.INFOを参考にして書かれた.