jQueryのパブリングとは？サンプルコード付きで解説！
jQueryのパブリングとは何かについての解説と、パブリングを止めるstopPropagation()やデフォルト動作を止めるpreventDefault()の使い方についてサンプルコード付きで解説します。
今回はjQueryのイベント処理で度々直面するパブリングについての解説となります。
パブリングとは何かや、パブリングを止める際に利用されるstopPropagation()と、よく混同ｓれがちなpreventDefault()についてもサンプルコード付きで解説していきます。
ではまずパブリングとは何かについて見ていきましょう。
パブリングとは？
パブリングとはある要素で発生したイベントが、親や祖先要素にも同じイベントが伝搬していく事を指します。
具体例
言葉だと分かりづらいので、具体例を見ていきましょう。
下記のサンプルコードを見てみましょう。
「子」という部分をクリックしてみましょう。
上記サンプルコードではdiv要素に対してクリックイベントを設定しています。このようにこれまで見てきたbutton要素以外でもクリックイベントは設定可能です。
さてdiv要素のイベント処理のイベントハンドラでは、対象の要素のテキストを取得し、アラート表示しています。
結果としてアラートが3回表示されたと思います。これがパブリングという現象です。
解説
今回のサンプルでは祖先 親 子というテキストがある部分はいずれもdiv要素です。
そのため、div要素に対してイベント設定をした場合上記の3つの要素が該当します。
「子」のテキストがある領域は、上記の3つのdiv要素の領域内ですので、「子」をクリックすると祖先をたどるように順番にイベントが発生します。
パブリングを止める方法
このパブリングを止めるにはイベントハンドラ（イベント処理に利用する関数）に渡ってくるイベントオブジェクトのメソッドであるstopPropagation()を実行します。
下記のサンプルコードを見てみましょう。
stopPropagation()
このようにイベントオブジェクトのstopPropagation()
デフォルト動作を無効にする方法
パブリングとは直接関係ないですが、よく混同されるpreventDefault()のメソッドも紹介します。preventDefault()もイベントハンドラのメソッドで、意味としてはイベントのデフォルト動作を無効にするメソッドです。
デフォルト動作とは、例えば
- リンクであれば、ページ遷移する
- フォームの送信ボタンであれば、情報を送信する
などHTMLの要素が最初から持っている機能の事を指します。
つまり、デフォルト動作を無効にするとは
- リンクであれば、ページ遷移を無効にする
- フォームの送信ボタンであれば、情報の送信を無効にする
という事になります。こちらもサンプルで見てみましょう。
上記のサンプルではリンクをクリックしてもページ遷移しません。これはa要素のクリックイベントのイベントハンドラでpreventDefault()により、デフォルト動作が無効にしているためです。
パブリングを止めるかつデフォルト動作を無効にする方法
これまでstopPropagation()とpreventDefault()という2つのメソッドを見てきましたが、度々この2つのメソッドを同時に指定したい場合があります。
しかし、この2つのメソッドの名前長いですよね。。
そこでこの2つのメソッドを同時に指定するとても短くて済むやり方を紹介します。
そのやり方はイベントハンドラでreturn falseで終える事です。
jQueryではイベントハンドラでreturn falseで終えた場合は、stopPropagation()とpreventDefault()の両方を同時に実行したものとして、処理してくれます。
return false;
// イベント設定
$('a').click(function(event) {
return false;
});
