JavaScriptでのイベントデリゲーションの詳しい説明-jsチュートリアル-php.cn

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

高洛峰

リリース： 2016-12-09 10:34:16

オリジナル

1393 人が閲覧しました

最近、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 によって与えられた例を示します: JavaScriptでのイベントデリゲーションの詳しい説明

これで、親要素 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 イベントが実行されます。それは探しているターゲット要素です。そうでない場合は無視されます。ターゲット要素のタグが必要なターゲット要素であるかどうかを確認できるだけでなく、属性や属性に基づいて検出することもできます。イベントプロキシを使用すると、非常に便利になり、多くの落とし穴を回避できることがわかります。メソッド