JavaScriptでのイベントデリゲーションの詳しい説明

最近、1,000 個のリにクリック イベントを追加するという質問を見たことがあります。これが当てはまる場合、ほとんどの人の第一印象は、クリック イベントを追加するだけだと思われるかもしれません。インタビュー中に GG があると予想されます。ここで、イベントのバブリングとキャプチャのメカニズム、およびイベントの委任メカニズムを見てみましょう。まず、イベントのバブリングについて説明します。イベント キャプチャのメカニズムに関しては、イベント バブリングは Microsoft によって提案され、イベント キャプチャは Netscape によって提案されました。その後、W3C はイベントが生成された後、妥協的なアプローチを採用するほかなくなりました。 , それは最初にキャプチャされ、次にバブルされます,

通常、js でイベントをリッスンする方法は 3 つあります。

ele.addEventListener(type,listener, [useCapture]);

ele.attachEvent('on'+type,listener);//IE6~10でサポート、IE11ではサポート外

ele.onClick=function(){};//全ブラウザでサポート

w3cで定義イベントステージはキャプチャステージ、ターゲットステージ、バブリングステージの3つです。w3cで規定されているdom2レベルの規定ではイベントのリッスンにaddEventListenerを使用しますので、まずaddEventListenerについて説明します。あなたのように、水に石を投げるように、水中の泡が下からポップアップします。これは、トリガーイベントが子要素から親要素の方向にトリガーされることを意味しますが、キャプチャメカニズムはまさにキャプチャ メカニズムは、親要素から子要素へのイベントをトリガーするものであり、useCapture が true の場合、addEventListener 関数の 3 番目のパラメーターが使用されます。 useCapture が false の場合、それはバブリング メカニズムです。 例を見てみましょう:

コードをコピーします

子要素をクリックすると、上の図が表示されます。 false を true に変更すると、実行順序が逆になることがわかります。これは、イベントのバブリングとキャプチャの違いです。逆に、このバインディング メカニズムを使用する場合の欠点は次のとおりです。イベントを各オブジェクトにバインドするのは特に面倒です。イベントを削除したり、イベントを変更したりする場合は特に面倒です。さらに重要なのは、JavaScript と DOM ノード間の関連付けが増加していることです。循環参照がある場合、メモリ リークが発生する可能性が非常に高くなります。これが欠点です。

この欠点を解決する方法の 1 つは、イベントを委任する方法です。この方法を使用すると、各ノードにイベントを 1 つずつ追加する必要がなくなります。親要素上で、このリスニング関数はイベントをトリガーした子要素を操作できるように自動的に決定します。ここに davidwalsh によって与えられた例を示します:

これで、親要素 ul と、いくつかの li サブ要素

<div class="parent">
  <div class="child">
 
  </div>
</div>
<script>
  var parent = document.getElementsByClassName(&#39;parent&#39;)[0];
  var child = document.getElementsByClassName(&#39;child&#39;)[0];
 
  parent.addEventListener(&#39;click&#39;,function(){
    console.log("这里是父元素");
  },false);
  child.addEventListener(&#39;click&#39;,function(){
    console.log("这里是子元素");
  },false);
</script>

ができました。 ここで達成したいのは、各 li ノードをクリックすると、li ノードのコンテンツが表示されるということです。上記の記述によれば、これらの li を後で追加することができ、100 li または 1000 li がある場合、これは悪夢になります。より良い解決策は、親要素に listen イベントを追加することです。問題は、どの li がクリックされたかを判断する方法です。listening イベント内の現在のイベントのターゲットを判断して、それが探しているノードであるかどうかを判断できます。ここに簡単な例があります:

<ul id="parent-list">
  <li id="post-1">Item 1</li>
  <li id="post-2">Item 2</li>
  <li id="post-3">Item 3</li>
  <li id="post-4">Item 4</li>
  <li id="post-5">Item 5</li>
  <li id="post-6">Item 6</li>
</ul>

When ul click イベントが発生した後、addEventListener はデフォルトでバブリング イベントであるため、イベントがトリガーされた後、基になるイベントがバブリングするときに listen イベントが実行されます。それは探しているターゲット要素です。そうでない場合は無視されます。ターゲット要素のタグが必要なターゲット要素であるかどうかを確認できるだけでなく、属性や属性に基づいて検出することもできます。イベント プロキシを使用すると、非常に便利になり、多くの落とし穴を回避できることがわかります。メソッド