バブリングのメリット

Question

バブリング（伝達）についてのサイトを見たのですが、いまいちそのありがたみというか、どういうときに、e.preventDefault();やe.stopPropagation();を使うのかがよくわかりません。

どういう仕様なのかはわかりますし、親へ伝播させたくないときはreturn false;を使うというのはわかっております。

http://blog.neo.jp/dnblog/index.php?module=Blog&action=Entry&blog=pg&entry=3107&rand=6b8f8

Answer 1

return false;

は親への伝播と防ぎつつ、もともとの動作をキャンセルします。

e.stopPropagation();

は親への伝播のみを防ぎます。

e.preventDefault();

はもともとの動作のキャンセルのみを行います。

以下のサイトを読めば、わかりやすいのではないかと思います。
jQuery のバブリング、preventDefault() や stopPropagation() の使用例
軽い利用サンプルも載ってます。

Answer 2

バブリング自体のメリットとしては、

• 大量に同じ要素がある場合に、イベントハンドラを上位でまとめて付けられるようになる。
• 動的にエレメントを生成するような場合でも、逐一イベントを付けずに済むようになる。

というようなことがあります。

e.preventDefault()は、a要素のリンクとかsubmitボタンとかの送信とか、もともとエレメントが持っている動作を殺したい場合に使います。