若手IT勉強会#12をやってきました
まずはEvent周り
前回やり残したEvent周りをちょろちょろと読み進める。
前回はソースを乗せすぎな気がしたので今回は要点のみ。
2911:unbind
bindの反対でDOM要素に関連づけられたイベントハンドラを削除する関数です。
2911: unbind: function( type, fn ) { 2912: return this.each(function(){ 2913: jQuery.event.remove( this, type, fn ); 2914: }); 2915: },
イベントタイプとイベントハンドラを指定してunbindします。
この引数のtypeには↓の4つを期待しています。
- jQuery.eventオブジェクト
- そのイベントに関連づいてるハンドラを削除します。
例:
$('div').bind('click',function(ev,data){ $(this).unbind(ev); });
これは要素に1度だけ発火するイベントを設定したいときに使えます。
ていうか「2901: one」の実装と全く同じ。
jQuery.eventオブジェクトじゃなくてもこんな事もできます。
$('div').unbind({type:'click', handler:{guid: 1}}); /* こんな勝手オブジェクトを渡すことで完全に狙い撃ちしてunbindできちゃう。 { type:'click', handler:{ guid: 1 // 要素に関連づけられているハンドラのguid } } */
- イベントタイプを表す文字列(clickとかmouseoverとか)
- fnを省略した場合、指定したtypeのすべてのイベントを削除します。
例:
// fn省略 $('div').unbind('click'); // divのすべてのclickイベントが削除される。
これが一番よく使う感じ。
// fnにbindと同じもの var onClickHandle = function(){ console.log("clicked!"); } $('div').bind('click', onClickHandle); $('div').trigger('click'); // => 発火する $('div').unbind('click', onClickHandle); $('div').trigger('click'); // => 発火しない
- イベントのネームスペースを表す文字列(.hogeとか)
例:
$('div').bind('mouseenter.hoge', function(ev,data){console.log('enter!')}); $('div').bind('mouseout.hoge', function(ev,data){console.log('out!')}); $('div').bind('click', function(ev,data){console.log('clicked!')}); $('div').trigger('mouseenter'); // => 発火する $('div').trigger('mouseout'); // => 発火する $('div').trigger('click'); // => 発火する $('div').unbind('.hoge'); // divのイベントのうち、.hogeネームスペースのイベントが削除される。 $('div').trigger('mouseenter'); // => 発火しない $('div').trigger('mouseout'); // => 発火しない $('div').trigger('click'); // => 発火する
自分でプラグイン作るときとか便利!
- undefined(指定しない)
- セレクタで抽出した要素のすべてのイベントを削除します。
// type省略 $('div').unbind(); // divのすべてのイベントが削除される。
fnは↓の2つが指定できます。
- bindで渡している関数
- undefined(指定しない)
jQuery.eventオブジェクトを渡す場合はfnに何を指定しても
内部的には別のものに書き換えられるので不要。
unbindの実体は「2521: remove」
2917:trigger
これはすでにDOM要素に関連付けられたイベントを明示的に発火させる関数です。
2917: trigger: function( type, data ) { 2918: return this.each(function(){ 2919: jQuery.event.trigger( type, data, this ); 2920: }); 2921: },
この引数のtypeには↓の2つを期待しています。
- jQuery.eventオブジェクト
- そのイベントと同じイベントを発火させます。
$('div:first').bind('click', function(ev,data){console.log('div clicked!');}); $('img:first').bind('click', function(ev,data){console.log('clicked!');$('div:first').trigger(ev); }); $('img:first').trigger('click'); // imgのクリックでdivにもクリックしたことになる。
- イベントタイプ
- 指定したイベントタイプのイベントを発火させます。
- ただし、イベントタイプに「!」が付いていると、ネームスペースなしのイベントだけを発火させることができます。
$('img:first').bind('click.hoge', function(ev,data){console.log('hoge clicked!')}); $('img:first').bind('click.fuga', function(ev,data){console.log('fuga clicked!')}); $('img:first').bind('click', function(ev,data){console.log('clicked!')}); $('img:first').trigger('click'); // => hoge clicked!、fuga clicked!、clicked! $('img:first').trigger('click!'); // => clicked! これはおいしいの?
dataを指定すると、イベントハンドラの第2引数で受けることができます。
$("img:first").bind("click", function(ev,data){console.log(data);}); // => {hoge:1, fuga:2, piyo:"aaa"}がdataに入る。 $("img:first").trigger("click", {hoge:1, fuga:2, piyo:"aaa"});
triggerの実体は「2591: trigger」
まとめ
そんなこんなで12回目終了です。
今回からATNDで募集をするようにしたのですが、かなり効果がありました。
いままでコンスタントに12,3人だったのが今回一気に19人まで集まりました!
しかも次回予告をまだweb上でしていないにも関わらず1週間たらずで上限の20人まで募集があつまりました><
これはすごい。
次回は 2009/11/29 にまた開催します!