jqueryのonを使って複数イベントをバインドする

jQuery1.7からイベントのバインドがon/offで統一できるようになったけど、
delegateする場合にひとつのターゲットに複数のイベントを登録する方法が分からなく困ったので、適当にやってたら出来たのでメモ。

onでdelegateする場合はこんな感じで書く。

$(E).on( event,selector, fn);

ひとつのターゲットに複数イベントを設定する場合はこんな感じ。

$(E).on({
	event1:function(e){
		// fn
	},
	event2:function(e){
		// fn
	}
},selector);

liveでイベント登録してた時は、$(E).live(selector,fn)だったから分かりやすかったけど、onだと引数3つあったから使い方がよく分かりませんでした。。

意外とやってみると出来るもんですね。

jqueryのonを使って複数イベントをバインドする

iPhoneとAndroidでUA判定する

iPhone/Androidで微妙にCSSを変えたい事が多いので、bodyにUAを判定してclassを設定するJavaScriptのメモ。

.iosとか.androidを起点にCSSを追加するだけでいいので結構便利。

本来ならもっと細かくUAを振り分けてもいいけれど、iPhoneかAndroidか程度で十分なので重宝してます。

1
2
3
4
5
6
7
8
9
(function(){
	var agent = navigator.userAgent,ua = '';
	if(agent.search(/iPhone/) != -1){
		ua = 'ios'
	}else if(agent.search(/Android/) != -1){
		ua = 'android'
	}
	if(ua) document.querySelector('body').setAttribute('class',ua)
})();
iPhoneとAndroidでUA判定する

jQuery1.7で追加されたon/off。

気づけばjQueryも1.7が出てましたw。
おいおい追加された機能を調べて行くけどon/offは分かりやすかったので取り敢えずまとめておく。

簡単に言うと、今までのイベントのバインドメソッドが一つにまとまりましたよ〜。という感じ。

jQueryでこれまで使えたイベントのバインドメソッド

  • $(ele).bind(fn)

    各要素それぞれにイベントをバインド

  • $(ele).live(fn)

    $(document)にイベントをバインド。bubblingで上がってきたイベントの発生元とセレクタの一致をチェックして、一致してたら発火。

  • $(ele).delegate(selector,fn)

    liveの強化版。$(document)ではなく任意の要素にイベントをバインドして、bubblingをチェック出来るようになったやつ。

それぞれ使い分けするにしても、イベントのバインドだけで3つ(unbindするメソッド入れると6つ)もあってコードが読みづらかったのを、on/offですっきり!という感じでしょうか。

これまでのイベントのバインドをon/offで書き直す

  • bind
    $( 'button' ).bind( 'click',fn);
    ↓
    $( 'button' ).on( 'click', fn);
  • live
    $( 'button' ).live( 'click',fn);
    ↓
    $(document).on( 'click','button', fn)
  • delegate
    $( '.sample' ).deligate( 'click','button',fn);
    $( 'sample' ).on( 'click','button', fn)

どの要素にイベントをバインドしてるか、直感的に分かりやすくなってていいですね。
今後は全部on/offで書いた方が可読性も増しそうです。

jQuery1.7で追加されたon/off。