(JS)イベントBubblingとCapture

8952 ワード
JavaScript イベントバッファ js Event ≪イベント｜Events｜ldap≫ JavaScript テキストリンク

イベントバッファ



イベントbundlingとは、あるスクリーン要素でイベントが発生すると、そのイベントがより上位のスクリーン要素に渡される特性です.
上のスクリーン要素は?
HTML要素には基本的にツリー構造があります.ツリー構造では、1つのレベルの上にある要素を親要素、bodyラベルを最上位要素と呼びます.
<body>
  <div class="one">
    <div class="two">
      <div class="three"></div>
	</div>
  </div>
</body>
var divs = document.querySelectorAll('div');
divs.forEach(function(div) {
	div.addEventListener('click', logEvent);
});

function logEvent(event) {
	console.log(event.currentTarget.className);
}
上のコードは、3つのdivラベルにclickイベントを登録し、クリックするとlogEvent関数を実行するコードです.
上図のように、divタグ<div class="three"></div>をクリックすると、以下の結果が実行されます.

画面要素にイベントが発生すると、ブラウザはイベントを上部の画面要素に伝播します.
したがって,クラス名3→2→1の順にdivタグに登録されたイベントが実行される.
注意点は、各タグにイベントが登録されているため、イベントが親要素に転送されたと判断できます.イベントが特定のdivタグにのみ依存している場合、上記の操作結果は判断できません.
同様に、子要素から親要素へのイベント伝播方式をイベントBubblingと呼ぶ.

stopPropagation()


そのために使用したe.stopPropagation()このサブエレメントでのみイベントが励起され、親エレメントにbundlingされないようにします.

イベントのキャプチャ


  • アクティビティスクリーンショットは、アクティビティbundlingとは反対方向に行われるアクティビティ伝播方式である.
  • addEventListner()部分オプションcapture: true
    • 上の図に示すように、イベントが発生すると、最上位のbodyラベルでラベルが検索されます.
    <body>
  <div class="one">
    <div class="two">
      <div class="three"></div>
    </div>
  </div>
</body>
    var divs = document.querySelectorAll('div');
divs.forEach(function(div) {
	div.addEventListener('click', logEvent, {
		capture: true // default 값은 false입니다.
	});
});

function logEvent(event) {
	console.log(event.currentTarget.className);
}
    同様に<div class="threee"></div>をクリックしても、以下の結果が得られます.
    Destructuring Assignment
    [Programmers]平均値を求める(Java)