JS イベントのバブリングとイベント キャプチャ (グラフィック チュートリアル、単純な暴力)

この記事では主にJSのイベントバブリングとイベントキャプチャについて紹介します。コード例を通して2つの違いを詳しく説明していますので、必要な方は参考にしてください

学校で先生からイベントバブリングとイベントについて説明を受けました。仕組みは Tingtianshu と同じですが、他のブラウザはイベント キャプチャを使用するのに対し、IE はイベント バブリングを使用するということだけを覚えています。当時は IE ブラウザの互換性の問題だと考えていたので、これについては深く掘り下げませんでした（IE8 未満のブラウザは基本的に市場から撤退しました）。仕事以来、この種の問題に何度も遭遇しましたが、深く調査したことはなく、常に部分的に理解しており、推測に頼っていました (A が機能しない場合は、B を選択してください)。今日何もすることがないときにデモを作成して、ようやくこの問題を完全に理解しました。

まず結論: これらはイベントトリガーのタイミングの問題を説明する用語です。イベント キャプチャとは、ドキュメントからイベントをトリガーするノードまでのプロセス、つまり、イベントをトリガーする上から下へのプロセスを指します。対照的に、イベント バブリングはイベントをボトムアップからトリガーします。バインドされたイベント メソッドの 3 番目のパラメーターは、イベント トリガー シーケンスがイベント キャプチャであるかどうかを制御します。 true、イベントキャプチャ、false、イベントバブリング。デフォルトは false で、イベントがバブルアップすることを意味します。 Jquery の e.stopPropagation はバブリングを防ぎます。つまり、私に関する限り、父と先祖のイベントはトリガーされません。

これは HTML 構造です

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

次に、イベントをバインドします

  document.getElementById("parent").addEventListener("click",function(e){
  alert("parent事件被触发，"+this.id);
  })
  document.getElementById("child").addEventListener("click",function(e){
  alert("child事件被触发，"+this.id)
  })

結果:

子イベントがトリガーされ、子
親イベントがトリガーされ、親

結論: 最初の子、次に親です。イベントは内側から外側に向かって順番にトリガーされます。これをイベント バブリングと呼びます。

ここで 3 番目のパラメーターの値を true に変更します

　　 document.getElementById("parent").addEventListener("click",function(e){
  alert("parent事件被触发，"+e.target.id);
  },true)
  document.getElementById("child").addEventListener("click",function(e){
  alert("child事件被触发，"+e.target.id)
  },true)

結果:

親イベントがトリガーされ、親
子イベントがトリガーされ、子

結論: 最初に親、次に子です。イベントトリガーの順序が外側から内側、つまりイベントキャプチャに変更されます。

イベントバブリングを使用する最後のケースですが、とにかく頻繁に使用します。

　　<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
 </ul>

要件は次のとおりです: マウスを li の上に置くと、対応する li の背景が灰色になります。

イベント バブリングを使用して次のことを実現します。

　　$("ul").on("mouseover",function(e){
   $(e.target).css("background-color","#ddd").siblings().css("background-color","white");
  })

イベントをすべての li に直接結び付けることができると言う人もいるかもしれません...

　　　$("li").on("mouseover",function(){
   $(this).css("background-color","#ddd").siblings().css("background-color","white");
  })

はい、これで大丈夫です。コードの単純さという点では、この 2 つは似ています。ただし、前者の方がすべての li ノードを走査するのに必要な操作が 1 つ少ないため、パフォーマンスの点では明らかに優れています。
また、バインディングイベントが完了した後にページにいくつかの要素を動的にロードすると...

$("<li>item7</li>").appendTo("ul");
このとき、イベントがバインドされた時点では item7 が存在しないため、効果のために 2 番目のオプションを使用します。 、別のイベントをそれにバインドする必要があります。そしてバブリングスキームの利用はULに関わる事件なので…
裁判官が裁かれる！

上記は私があなたのためにまとめたものです。

関連記事:

ng-repeatレンダリング完了 AngularJSを使って監視する方法

p5.js_javascriptスキル

JS+PHPを使って動的に追加する花火の特殊効果を作るサンプルコードメソッドからクラスへ

以上がJS イベントのバブリングとイベント キャプチャ (グラフィック チュートリアル、単純な暴力)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。