はじめに

jQueryのonイベントで、無名関数を指定して処理を実行させる書き方は自分でもよくやるのですが、処理が長くなった場合、この書き方ではソースコードが読み辛くなってしまいます。
そのため、処理を関数化して、呼び出す方法を採用しました。
やっていることは簡単なのですが、引数を渡すところで思うようにいきませんでした。。。
今回は、色々とやり方を模索した中で、一番分かりやすく、簡単な方法をご紹介します。

サンプルコード

HTML


<buton class="btn" data-num="1">click</buton>
<buton class="btn" data-num="2">click</buton>
<buton class="btn" data-num="3">click</buton>
<buton class="btn" data-num="4">click</buton>

javascript


<script>
  $(function(){
    //ボタン
    $(".btn").on("click",function(event){
      btnClick(event,this);
    });

    function btnClick(_event,_this){
      //例えば、event処理を取り消すことも可能
      _event.preventDefault();
      //クリックしたボタンを識別することも可能
      console.log($(_this).data('num'));
    }

  });
</script>

この書き方でイベントハンドラやthisを引数として、利用することができます。
onイベント後の無名関数が長くなってしまったと、悩んでいる方はこの方法で解決できるのではないでしょうか。

皆様のお役に立てれば幸いです。