読者です 読者をやめる 読者になる 読者になる

しまてく

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

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