jQueryのonイベントなどで引数の関数に値を渡す方法

jQueryのonイベントは最も基本的に使用する文法の1つだと思います。

しかし、onイベントの第二引数に値をどうやって渡すかはあまり知られておらず、私も引数を持つ関数を使う際にいろいろ調べる羽目になってしまいました。

そこで今回は、jQueryのonイベントなどで引数の関数に値を渡す方法をご紹介したいと思います。

jQueryのonイベントで引数を渡す

jQueryのonの使い方は皆さんご存知だと思います。

$('#button1').on('click', greet) 

function greet(){ 
  alert('Hello') 
}

このように、第一引数にはイベントを、第二引数にそのイベント発火時に呼び出したい関数を書きますよね。

ここで、「第二引数の関数の引数に値を渡したい」ときがあるとおもいます。

その時は大まかに以下の2通りの方法で解決することができます。

方法①：無名関数を使う

無名関数を使うことで、関数に値を渡します。

直感的にわかりやすいですが、少々長くなるのが気になる点でしょうか。

$('#button1').on('click', function(){ 
  greet("Taro") 
}) 

function greet(name){ 
  alert('Hello' + name) 
}

方法②：onイベントの引数を3つにする

次に、onの引数を3つに増やすことで、関数に値を渡します。

このとき大切なのが順番で、第二引数に渡したい値を書きます。

方法①よりも記述が短くなります。

$('#button1').on('click', {name = "Taro"}, greet) 

function greet(event){ 
  alert('Hello' + event.data.name) 
}

ポイントとなる書き方は以下です。

ここではオブジェクトを作っていますが、あらかじめ変数に代入しておけば、さらに短く記述することができます。

なお、以下の書き方だとうまくいかないのでご注意ください。

$('#button1').on('click', greet("Taro")) //うまくいかない

まとめ

jQueryのonイベントなどで引数の関数に値を渡す方法をご紹介しました。

無名関数を使うか、onイベントの引数を3つに増やす方法があります。

ぜひ状況にあった方法を使ってください。最後までお読みいただきありがとうございました。