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

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

亚连

リリース： 2018-05-19 09:47:23

オリジナル

1707 人が閲覧しました

この記事では主に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 サイトの他の関連記事を参照してください。