若手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 にまた開催します！

しまてく

学んだ技術を書きためるブログ

若手IT勉強会#12をやってきました

まずはEvent周り

2911:unbind

2917:trigger

まとめ