イベントフロー(2)

今回はイベントフローに関するメソッドを紹介していきます。
 
 
 

バブリングの停止

前回の最後にバブリングによって効率が悪くなる例を紹介しました。しかしイベントオブジェクト
に対してstopPropagationメソッドを利用すると、バブリングを停止することができます。
リファレンス:event.stopPropagation()
サンプル05_eventFlow_07.htmlを開いてソースを確認してください。
http://www.designdrill.jp/jquery/10/05_eventFlow_07.html

eventObject.stopPropagation();

 
stopPropagationメソッドはイベントオブジェクトに利用することに気を付けてください。
これによって以降のバブリングが停止され、どのdivをクリックしても1回しかalertが
表示されません。前回の対応策(セレクタをidで絞る方法)では緑以外のクリックを
取得できませんでしたが、この方法であれば他のdivのクリックも取得できます。
 
ついでにクリックされたdivのidを報告するように変更したサンプルも紹介します。
きちんとクリックされたdivが1回だけ報告することを確認してください。 
http://www.designdrill.jp/jquery/10/05_eventFlow_07b.html
 
 
またreturnでfalseを返すことでもバブリングを停止できます。
サンプル04_eventFlow_08.htmlで確認してください。
http://www.designdrill.jp/jquery/10/05_eventFlow_08.html
 
 
 
 

preventDefaultメソッド

イベントメソッドついでにpreventDefaultを紹介します。これはjavaScriptからブラウザに
流れるイベントを停止するメソッドです。つまりブラウザ本来の機能を停止させるメソッド
で、これを利用すればaタグをクリックしてもリンクさせないこと等できます。また、
これはバブリングは停止しません。
リファレンス:event.preventDefault()
 
preventDefaultのサンプルを紹介する前に以下のサンプル05_eventFlow_09.htmlを確認
してください。バブリングのサンプルにリンクを追加したものです。緑のdivをクリック
してバブリングが完了してからリンクします。
http://www.designdrill.jp/jquery/10/05_eventFlow_09.html
 
ちなみにstopPropagationメソッドでバブリングを停止してもリンクは機能します。
サンプル04_eventFlow_10.htmlでバブリングを停止してもリンクすることを確認してください。
http://www.designdrill.jp/jquery/10/05_eventFlow_10.html
 
 
ではpreventDefaultメソッドのサンプルです。05_eventFlow_11.htmlを開いてください。
preventDefaultメソッドによって緑のdivをクリックしてもリンクしないことが確認できます。
バブリングに影響はありません。
http://www.designdrill.jp/jquery/10/05_eventFlow_11.html

eventObject.preventDefault();

 
 
 

returnでfalseを返す

return falseでバブリングを停止することは説明しましたが、これはさらにブラウザ本来の
機能も停止させます。つまりstopPropagationメソッドとpreventDefaultメソッドの両方
実行しているのと同じ結果となります。サンプル05_eventFlow_12.htmlで確認してください。
http://www.designdrill.jp/jquery/10/05_eventFlow_12.html
 
 
 

stopImmediatePropagationメソッド

最後に何に利用できるか想像できないけれど、ついでにstopImmediatePropagationを紹介
します。リファレンス:event.stopImmediatePropagation()
 
これはfunctionを伝わるイベントフローを停止するメソッドです。機能を確認する前に
以下のサンプル05_eventFlow_13.htmlで、どの様な順番でalertされるか確認してください。
http://www.designdrill.jp/jquery/10/05_eventFlow_13.html
 
functionは処理が終了すると、呼び出された場所に戻り、そこで処理を続けるので
サンプルでは「largeFunc:1→middleFunc:1→smallFunc→middleFunc:2→largeFunc:2」
と表示されます。この流れを中断するのがstopImmediatePropagationメソッドです。
ちなみにバブリングがあればバブリングも停止させます。サンプル05_eventFlow_14.htmlで
イベントフローが中断されるためalertがmiddleFunc:1で停止します。
http://www.designdrill.jp/jquery/10/05_eventFlow_14.html
 
今まで幾つかの言語で仕事をしてきましたが、こういうことが必要になるケースが
無かったので、何に利用できるかいまいち分かりません…。
 
ちなみにreturnも似ていますが、フローは止めずに、そのfunctionから抜けるだけです。
http://www.designdrill.jp/jquery/10/05_eventFlow_15.html
 
おしまい
 
 
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


× 7 = 四十 二


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>