Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
7
Help us understand the problem. What is going on with this article?

More than 3 years have passed since last update.

@tsukahara-akito

【jQuery】onイベントでコールバック関数に引数を渡す方法

はじめに

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イベント後の無名関数が長くなってしまったと、悩んでいる方はこの方法で解決できるのではないでしょうか。

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

7
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
7
Help us understand the problem. What is going on with this article?