jqueryのonメソッドについて

jqueryのイベント紐づけのonについて書いていきます。

###基本的な使い方

$('button').on('click',function(){
    alert('a');
})

###データを渡すこともできる

var hoge = 'a'
$('button').on('click',{hoge:hoge},function(e){
    alert(e.data.hoge);
})

第二引数にjsonを指定するとeで値を渡せます。
これを知るまでグローバルに変数を置いてその値を使うという原始的なことをしていたから、グローバル汚染が大変だった。

###複数のイベントを一度に指定
同じ関数を使うなら半角スペース区切ると指定できます。

$('button').on('click touchstart',function(){
    alert('a');
})

別の関数を使うならjsonで指定

$('button').on({
    click :function(){
       alert('click'); 
    },
    touchstart :function(){
        alert('touchstart');
    }
})

###後から追加された要素も対象にする

$('.btn').on('click',function(){
    alert('a');
})
$('button').addClass('btn');

.btnはイベントが登録された後に追加されてるので↑ではイベントが発火しません。

後から追加された要素も対象にするには↓

$(document).on('click','.btn',function(){
    alert('a');
})
$('button').addClass('btn');

これはdocumentの中にある.btnにイベントを紐づけています。
$('body')のようにすれば範囲を狭めることができます。

###trigger()で強制発火

$('button').on('click',function(){
    alert('a');
});
$('button').trigger('click');

.trigger('click')を使えば、クリックしてないのにclickイベントが発火します。