- ベストアンサー
addEventListenerで
window.addEventListener("load", addEvents, false); function addEvents() { for (var i = 0; i < 3; i++) { document.getElementById("hoge" + i).addEventListener("click", function() { check(i) }, false); } } ---- というコードで、イベントを追加したのですが hoge0をクリック -> check(3)を呼び出し hoge1をクリック -> check(3)を呼び出し hoge2をクリック -> check(3)を呼び出し となってしまいます。つまり、引数にループの最後の数字+1が渡されてしまいます。 どうしたらよいのでしょうか？
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Q3843076 TestCase 1</title> <script type="text/javascript"> //<![CDATA[ //addEventListenerを使っているのは意図的だね？(IEを考えなくていいよね？) //俺は不勉強で,あまり理解していない。 //一応関数コンストラクタでやるとうまく行くようだ。 //あとは・・・そうだな。iを利用するのを諦めて //this.getAttribute("id")とか(ぉ window.addEventListener("load", addEvents, false); function addEvents() { for (var i = 0; i < 3; i++) { document.getElementById("hoge" + i).addEventListener("click", new Function("alert(" + i.toString()+")"), false); } } //]]> </script> </head> <body> <p id="hoge0">あ</p> <p id="hoge1">あ</p> <p id="hoge2">あ</p> </body> </html>
その他の回答 (2)
- auty
- ベストアンサー率58% (284/486)
himajin100000 さんのを見ずに投稿しました。 Functionコンストラクタの場合、指摘どおり動作するのを確認しました。 getAttribute("id")を使えば、 function() { var ss=this.getAttribute("id"); check(ss.substring(ss.length-1)); } ということですね。
- auty
- ベストアンサー率58% (284/486)
詳しくチェックしたわけではありませんが、 登録されたイベントハンドラは、実行するたびに評価されるようです。 したがって、この場合 i=3 として実行されるようです。 これは、 function() { check(i) } を function() { check(i++) } としてみるとよく分かります。 実行するたびに１づつ増えていきます。 今回は、１づつ書かざるを得ないでしょう。 ----------------------------------------------------------------------------------------------- document.getElementById("hoge0").addEventListener("click", function() { check(0) }, false); document.getElementById("hoge1").addEventListener("click", function() { check(1) }, false); document.getElementById("hoge2").addEventListener("click", function() { check(2) }, false);
お礼
やはりそうだったんですね。 回答ありがとうございました。
お礼
Functionコンストラクタという手があったのですね・・・ すっかりその存在を忘れてました（笑） 回答ありがとうございました。