event.bubblesプロパティ

投稿日: 2013年9月29日 作成者: alphasis

event.bubblesは、発生したイベントがイベントバブルであるかどうかを返すプロパティ。

イベントバブルとは、子要素のイベントが発生すると、その親要素や先祖要素の同じタイプのイベントが発生すること。

構文

event.bubbles

戻り値

発生したイベントがイベントバブルであるかどうかを示す論理値（ブール値、真偽値、真理値）を返す。

  • イベントバブルであれば、「true」を返す。
  • イベントバブルでなければ、「false」を返す。

サンプル

sample1：

バブリングイベント１：

sample2：

バブリングイベント２：

sample3：

バブリングイベント３：

サンプルの動作について

  • idが「sample1」であるDIV要素をクリックすると、「sample1：」の右横に「クリックしましたね♪」と表示、「バブリングイベント１：」の右横には「true」と表示する。
  • idが「sample2」であるDIV要素をクリックすると、「sample1：」と「sample2：」の右横に「クリックしましたね♪」と表示、「バブリングイベント１：」と「バブリングイベント２：」の右横には「true」と表示する。
  • idが「sample3」であるDIV要素をクリックすると、「sample1：」と「sample2：」と「sample3：」の右横に「クリックしましたね♪」と表示、「バブリングイベント１：」と「バブリングイベント２：」と「バブリングイベント３：」の右横には「true」と表示する。
  • 「リセット」ボタンをクリックすると、表示したテキストを消し、元の状態に戻す。

サンプルのソースコード

JavaScript

<script type="text/javascript">
window.onload = function () {
 document.getElementById( "sample1" ).onclick = function( $event ){
  document.getElementById( "sample1output" ).innerHTML = "クリックしましたね♪";
  document.getElementById( "sample1outputBubbles" ).innerHTML = $event.bubbles;
 };
 document.getElementById( "sample2" ).onclick = function( $event ){
  document.getElementById( "sample2output" ).innerHTML = "クリックしましたね♪";
  document.getElementById( "sample2outputBubbles" ).innerHTML = $event.bubbles;
 };
 document.getElementById( "sample3" ).onclick = function( $event ){
  document.getElementById( "sample3output" ).innerHTML = "クリックしましたね♪";
  document.getElementById( "sample3outputBubbles" ).innerHTML = $event.bubbles;
 };
 document.getElementById( "sampleReset" ).onclick = function(){
  document.getElementById( "sample1output" ).innerHTML = "";
  document.getElementById( "sample1outputBubbles" ).innerHTML = "";
  document.getElementById( "sample2output" ).innerHTML = "";
  document.getElementById( "sample2outputBubbles" ).innerHTML = "";
  document.getElementById( "sample3output" ).innerHTML = "";
  document.getElementById( "sample3outputBubbles" ).innerHTML = "";
 };
}
</script>

HTML

<p><button id="sampleReset">リセット</button></p>
<div id="sample1">
 <p>sample1：<span id="sample1output"></span></p>
 <p>バブリングイベント１：<span id="sample1outputBubbles"></span></p>
 <div id="sample2">
  <p>sample2：<span id="sample2output"></span></p>
  <p>バブリングイベント２：<span id="sample2outputBubbles"></span></p>
  <div id="sample3">
   <p>sample3：<span id="sample3output"></span></p>
   <p>バブリングイベント３：<span id="sample3outputBubbles"></span></p>
  </div>
 </div>
</div>

CSS

<style>
#sample1,
#sample2,
#sample3 {
 padding: 10px;
 background-color: #f0f0f0;
 border: 1px solid gray;
 border-radius: 10px;
 cursor: pointer;
}
</style>

スポンサード リンク

カテゴリー: DOM, Eventオブジェクト, JavaScript, イベント, プロパティ, リファレンス パーマリンク