Psalm

プログラマ向け技術メモ

DOMのonclickプロパティに引数ありの関数を指定する方法。

2009-03-24 11:18:57 | JavaScript
例えば、こういうパターン。

for(var i=0; i<10; i++) {
    var link = document.createElement("a");
    var url = "xxxxxxxx?id=" + i;
    var onclickEvent = function() {
        location.href = url;
        return false;
    }

    link.onclick = onclickEvent;
    link.setAttribute("href", "javascript:void(0)");
    link.appendChild(document.createTextNode("URLその" + i));
}

for文でiを+1ずつしたリンクを10個作成している。
ように見える。
が、リンクをクリックしてみるとIDは常に9なのである。
リンクをクリックしたときにはfor文回り終わってるんだから当たり前である。
う~む、これはいけてない・・・
という訳で、調べてみたら素晴らしい解決法を発見。

    var onclickEvent = (function(num) {
        return function() {
            location.href = url + "&id=" + num;
            return false;
        }
    })(i);

どうやら(i)がミソらしい。
これがあることによって、function(num)のオブジェクトを
即時に作ってくれるのだそうで。
う゛~~~~ん。奥が深いな、Javascript!