40
41

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

JavaScriptでコールバック関数にあらかじめ引数を渡したい!

Last updated at Posted at 2012-12-26

JavaScriptではイベント処理などで何かとコールバックを使います。でもコールバックが受け取る引数は普通はコールバックを呼び出す側が決めてしまうので自前の引数を渡したいと思うと少し工夫しないといけません。
このサイトを参考にいたしました。
Javascriptでイベントハンドラのコールバック関数に引数を渡す

callback1.js
var action = function(evt){
    alert(evt);
}
var button = document.getElementById("button");
button.addEventListener("click",action,true);

これではactionに渡されるものはevtだけです。
1、二回呼んでみる。関数の中でactionを呼んでみるパターンです。

callback_rap.js
var action = function(evt,arg1,arg2){
    alert(arg1+evt+arg2);
}
var button = document.getElementById("button");
button.addEventListener("click",function(evt){ action(evt,"foo","bar")},true);

2、関数を返す方法

callback_callObj.js
var action = function(arg1,arg2){
    return function(evt){
        alert(arg1+evt+arg2);
    }
}
var button = document.getElementById("button");
button.addEventListener("click", action("foo","bar"),true);

二個目の方法は確かサイ本でプライベート変数の作成をエミュレートする方法として書いてあった気がします。JavaScriptの変数はコールオブジェクトのプロパティとなるので関数が作成された時のarg1とarg2はactionが受け取っていた値で決まってしまうのです。
今回、僕はイベント処理として使ったわけではないですが、コールバック処理には何かと使えるのではないかと思います。

40
41
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
40
41

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?