2009年11月19日

jQuery カスタムイベントのバブリング

ちょっとカスタムイベントのバブリングしたいなぁと思ってjQueryのソース見てたら、こんなん出てきました。

trigger: function( event, data, elem, bubbling )

おっと、これ4番目の引数trueで余裕でしょjk
と思って続きも見ずに下のコードを書いて実行してみました。


HTML:

<table id="fooTable" >
<tr >
<td>
<select id="foo">
<option >カレーは</option>
<option >飲み物</option>
</select>
</td>
</tr>
</table>



JavaScript:

$("#fooTable").bind("changeFoo", onChangeFoo);

$("#foo").change(function () {
jQuery.event.trigger(jQuery.Event("changeFoo"), [], $("#foo")[0], true);
});

function onChangeFoo(evt) {

alert($(evt.target).val());

}




あら、、、動かない、、、、なぜ??
よくよくソースを見てみると

triggerファンクションのbubblingが未定義またはfalseの時に
eventのtargetにエレメント設定したりしてる、、

さらに下を見るとこれ
if ( !event.isPropagationStopped() ) {
var parent = elem.parentNode || elem.ownerDocument;
if ( parent )
jQuery.event.trigger(event, data, parent, true);
}

あら、、これってbubblingとか関係ないじゃん、、isPropagationStopped()がfalseの時に
triggerのbubblingにtrue指定してるし、、、もしかして再帰用??

なんか微妙に納得がいかないまま更に読み進めると
jQuery.Event.prototypeの中に
isPropagationStopped: returnFalse
の記述が、、、あらーーーーん、これカスタムイベントだとデフォルトバブリングする系?


ちうことで、下ので動きました
$("#foo").change(function () {
jQuery.event.trigger(jQuery.Event("changeFoo"), [], $("#foo")[0]);
});

逆にバブリングしたくない時はこれで
var eventObj = jQuery.Event("changeFoo");
eventObj.isPropagationStopped = function () {return true;};

jQuery.event.trigger(eventObj, [], $("#foo")[0]);

なんか微妙な気分になりましたが、動いたのでまぁいいかぁ

あぁ、、、追記
trigger: function( event, data, elem, bubbling )なんですが

jQuery.fnにあるtriggerが上のやつ呼んでるので結局
$("#foo").trigger("changeFoo");
でおけ(・ω・)

バブリングするには何かがんばらないとイカンのだと勝手に思って
あれこれしましたが、普通にtrigger呼べば全然大丈夫というお話
posted by しお at 13:00| Comment(0) | TrackBack(0) | jQuery
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/33731969

この記事へのトラックバック