JavaScript でのイベント委任 (画像とテキストのチュートリアル)

この記事では、主に JavaScript でのイベント委任の詳細な説明に関する関連情報を紹介します。必要な友人は参照してください。

最近のインタビューで、おそらく 1000 li にクリック イベントを追加するように求められた質問を見ました。ほとんどの人の第一印象は、各リに 1 つ追加することです。これは、イベントのバブリングとキャプチャのメカニズムを撤回するためであると推測されます。イベント委任メカニズムについて見てみましょう

まず、イベント バブリングとイベント キャプチャのメカニズムについて説明します。当時、イベント バブリングは Netscape によって提案されました。その後、w3c はイベントが生成された後、まずキャプチャしてからバブルするという妥協的な方法を採用せざるを得ませんでした。 通常、js でイベントを監視する方法は 3 つあります。 ele.addEventListener(type,listener,[useCapture]);//IE6～8は未対応

ele.attachEvent('on'+type,listener);//IE6～10は未対応、IE11

をサポートしていません ele.onClick=function(){};//すべてのブラウザは

をサポートしています w3c 仕様では、キャプチャ ステージ、ターゲット ステージ、バブリング ステージの 3 つのイベント ステージが定義されており、w3c dom2 レベルの規則では、イベントをリッスンするために addEventListener が使用されます。そのため、addEventListener を使用して説明します。最初に、偽の泡は、水に石を投げると水の中の泡が下から上に上がるのと同じです。これはトリガーを意味します。イベントは子要素から親要素の方向にトリガーされますが、キャプチャ メカニズムはその逆で、親要素から子要素にイベントをトリガーし、 の 3 番目のパラメーターをトリガーします。 addEventListener 関数は、キャプチャ メカニズムを使用するか、useCapture が true の場合はバブリング メカニズムであるかを決定するために使用されます。 useCapture が false の場合、それはバブリング メカニズムです。

コードをコピー

<p class="parent">
  <p class="child">

  </p>
</p>
<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>

子要素をクリックすると、上の図が表示されます。 false を true に変更すると、これがイベントのバブリングとの違いです。このバインディング メカニズムを使用する欠点は、イベントを各オブジェクトにバインドする必要があり、イベントを削除する場合に特に面倒になることです。さらに重要なのは、JavaScript と DOM ノードの間に相関関係を追加したことです。さらに、循環参照が発生するとメモリ リークが発生する可能性があります。したがって、この欠点を解決する 1 つの方法があります。イベント委任を使用すると、各ノードにイベントを 1 つずつ追加する必要がなく、親要素のリッスン関数がイベントをトリガーした子要素を自動的に決定します。イベントをトリガーできるように、li ノードごとに li ノードの内容が出力されます。これらの li を選択し、これらのメソッドを追加します。必要がなくなったら削除してください。100 li や 1000 li がある場合、より良い解決策は、親要素に listen イベントを追加することです。イベント内で、現在のイベントのターゲットを判断して、それが探しているノードであるかどうかを判断できます。ここでは簡単な例を示します。

<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>

クリック イベントが ul で発生したとき、addEventListener のデフォルトはバブリング イベント。リスニング イベントは、基になるイベントがトリガーされたときに実行され、それが探しているターゲット要素であるかどうかを検出します。そうでない場合は、無視されます。ターゲット要素のラベルが必要なターゲット要素であるかどうかを確認するだけでなく、ターゲット要素の属性またはクラス名に基づいて検出し、処理に API ele.maeches を使用することもできます。皆さんのためにまとめたものです。今後皆さんのお役に立てれば幸いです。

関連記事:

Vue.

jsmpvueフレームワークの開発手順を詳しく解説

js

とcssファイルの読み込みと削除の手順を詳しく解説

書き方不規則な多次元配列を走査する必要がある場合の JS

以上がJavaScript でのイベント委任 (画像とテキストのチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。