DOM

：

：

Event.bubbles プロパティ

　編集：2022.10.03 by T.A.

[Edge]。読取専用。→、

イベント Event が DOM ツリーをバブリング（イベントの浮上）するかしないかを示します。

Note： バブリングについての詳細は、 を参照してください。

キャプチャリング：

バブリング：

構文
Event.bubbles
Event イベント オブジェクト（¶Event、MouseEvent、…）。
値

論理値で、このイベントが DOM ツリーをバブリングするのであれば true です。

例
function handleInput(e) {
  // Checks whether the event bubbles and ...
  if (!e.bubbles) {
    // ... passes the event along if does not
    passItOn(e);
  }

  // Already bubbling
  doOutput(e);
}
簡単なテスト

HTML： 

<SPAN onclick="Job(event)">SPAN要素。ここでクリック…</SPAN>

JavaScript： 

function Job(eve){    //イベントが有ったときに呼び出される関数：eveにeventオブジェクトが入る。
  alert(eve.bubbles); //イベント浮上するか否かを表示。
}

表示結果は「true」となった。

バブリングのテスト

HTML： 

<DIV onclick="Job(event)">[DIV要素。ここでクリックか、
  <SPAN>[SPAN要素。ここでクリック]</SPAN>
  <INPUT onclick="Job2(event)">
  終わり]
</DIV>

JavaScript： 

function Job(eve){  //DIV以下でクリックされたら処理される：
  let Y=eve.target; //イベントが起きた要素の取得。
  alert("Job()："+ Y.tagName +"："+ eve.type +"："+ eve.bubbles); //表示：
	//タグ名、イベントタイプ、bubbles。
}
function Job2(eve){ //INPUTでクリックされたら処理される：
  let Y=eve.target; //イベントが起きた要素の取得。
  alert("Job2()："+ Y.tagName +"："+ eve.type +"："+ eve.bubbles); //表示：
	//タグ名、イベントタイプ、bubbles。
}

DIVでクリックすると「Job()：DIV：click：true」と表示され、

SPANでクリックすると「Job()：SPAN：click：true」と表示され、

INPUTでクリックすると「Job2()：INPUT：click：true」、「Job()：INPUT：click：true」と表示され、バブリングが起きている。同じイベントタイプを辿っている。

テスト