javascript - Firefox Javascript イベント匿名関数

Question

ユーザーが HTML テーブルのセルをクリックしたときに匿名関数を登録しようとしています。生の、純粋なコードの一部を次に示します。

document.getElementById(
    "course"+displayed_year_index+occurrences_indices[displayed_year_index]).onclick =
        eval("function() {PrintReceipt("+result.years[result_year_index].rul_code+");};");

evalこれはループ内にあり、無名関数は毎回異なるため、の使用に注意してください。

これは、Firefox 2 ではまったく問題なく動作します。しかし、Firefox 3 では、「関数」という単語の後の括弧内を指す「構文エラー」がスローされます。

これを修正する方法について、誰かが賢いアイデアを持っていますか?

私がやろうとしていることを明確にするために、非常に単純化された例を次に示します。

for (index=0; index<4; index++) {
    document.getElementById("div"+index).onclick = 
        eval("function () {Foo(index);};");
}

つまり、同じ関数を、それぞれに異なるパラメーター値でトリガーしたいと考えていますdiv。

score 5 · Accepted Answer

このようなことを試しましたか？

document.getElementById('course' + displayed_year_index + occurences_indices[displayed_year_index]) =
    function (nr)
    {
        return function () { PrintReceipt(nr) }
    } (result.years[result_year_index].rul_code);

何をしようとしているのかを推測させるのではなく、問題を見つけるのに役立つループを投稿していただけますか?

score 4 · Accepted Answer

この場合、IMHO クロージャーは使用しないでください。onlick ごとに新しい関数を作成する必要はなく (必要以上に多くのメモリを使用します)、eval は間違った答えです。

getElementById で取得する要素がオブジェクトであり、それに値を割り当てることができることを知っていますか?

for ( /* your definition */ ) {
  var e = document.getElementById(
    "course"+displayed_year_index+occurrences_indices[displayed_year_index]
  );
  e.rul_code = result.years[result_year_index].rul_code;
  e.onclick = PrintReceipt;
}

ただし、最初に PrintReceipt を定義する必要があります。

function PrintReceipt() {
  //This function is called as an onclick handler, and "this" is a reference to the element that was clicked.
  if (this.rul_code === undefined) { return; }
  //Do what you want with this.rul_code
  alert (this.rul_code);
}

score 1 · Accepted Answer

トムが提案したようなクロージャを使用します。

John Resigによる良い説明があります：クロージャの仕組み（pdf）

score 0 · Accepted Answer

これがあなたが行きたい方向のようです：

document.getElementById("course"+displayed_year_index+occurrences_indices[displayed_year_index]).addeventlistener("click",  function() {
    var current_rul_code = result.years[result_year_index].rul_code;
    PrintReceipt(current_rul_code);
}, true);

これにより、各 to onclick イベントが異なるスコープ (ループの各反復) 内で作成されます。クロージャーが残りを処理します。

javascript - Firefox Javascript イベント匿名関数

4 に答える 4

Related

Reference