@fujixfujiko

« jQuery初心者のときから知っておけばよかったと思うこと | メイン  | jQueryのbind、live、delegateの違いについて(あと新API on、offへの参照リンク) »

jQueryのバブリングと、「return false;」「e.stopPropagation();」「e.preventDefault();」について

どうも(o´ω`o)ノ
今年もあと10週間ですねー。

今日はjQueryの、イベントのバブリングについてです。

バブリングの「バブル」は泡です。たぶん。
jQueryはHTMLで書かれた要素(DOM)を、以下のようにツリー形式で持っています。



そして、一番下のA要素をクリックすると、それが一番親のwindowまで伝わります。



これがイベントのバブリング(「伝達」とでも言うのかな)です。

クリックイベントは、例え自分がクリックされていなくても、子孫要素がクリックされれば発動します。



イベントは子供から順番に起きます。

よくAタグの「href="#"」を無効にするために、Aタグのクリックイベントの最後で
「return false;」をやることがありますが、あれは親へのバブリングも止めてしまいます。



「href="#"」は無効にしたいけれど、親にイベントをバブリングしたいときは、

e.preventDefault();

を使います。


逆に、「href="#"」は有効にしたいけれど、親へイベントをバブリングしたくないときは、

e.stopPropagation();


を使います。


全てをAタグのところで止めてしまいたいときだけ

return false;

を使います(もしくは上記の2つを併用)。



bind、live、delegateについて書こうと思ったのですが、長くなりそうなので次回に続きます。(p・ω・q)