【Javascript】メモ:イベントのバブリングってなに?

Ajaxを調べてて、なんじゃそりゃって思ったのでメモとして書いておきます。

JavascriptでAの要素の中にBがあるとして、この場合Aは親要素、Bは子要素という立ち位置になります。

ソースでいうとこんな感じ。

<div>
	<div></div>
</div>

この場合、親の要素にも子の要素にもonclickなどのイベントハンドラが設定されてると、子供をクリックしたときに親のイベントハンドラまで実行されてしまう、ということ。
これはCSSのposition:relativeなどで親と子が見た目的に重ならないようにしても同じです。

この現象をバブリングと言います。泡が下から上へプクプク上がっていくことからそう呼ばれてるそうです。

これを避けるにはeventオブジェクトのstopPropagation();を使います。まぁ今回はバブリングってなーに?ということのメモなので、そのあとのことはまた今度。
jqueryを使っている場合はこちらのサイトにいろいろ書いてあります。jQuery日本語リファレンス

  • このエントリーをはてなブックマークに追加

PICxPIC

会社を経営する30代男性。iPhoneアプリをつくったりしながら毎日ぴくぴく生きてます。

関連記事

  1. NO IMAGE
  2. NO IMAGE
  3. NO IMAGE
  4. NO IMAGE
  5. NO IMAGE
  6. NO IMAGE

コメント

コメントをお待ちしております

プロフィール

PICxPIC
1983年生まれ。2010年からiOSアプリを開発し、2012年に法人化。メディア掲載やランキング、ダウンロード数などの詳しい実績などはこちら

PICxPICのアプリ

赤ちゃんの大冒険

おさるランド

動物オーケストラ2

子どもゲームランド

おしゃべりボタン

天空までのぼれ!

ジャンプで川下り

ひよこランド

動物オーケストラ

ポコポコアニマル

キラキラお絵かき

音が出るお絵かき

あいづちん