通過For循環選擇和添加函數到Div的

我想快速選擇div，所以我寫了一個for循環，選擇所有的div並快速添加函數給他們，而不是「onClick ='blahblah'」方法。這裏是我的代碼：通過For循環選擇和添加函數到Div的

<!DOCTYPE html> 
<html> 
<head> 
    <title>Strategy Game Dev Test</title> 
    <meta charset="utf-8" /> 
    <script type="text/javascript"> 
     function illu_area(){ 
     alert("test"); 
     } 
     function everything(){ 
      for(var test_id = 0; test_id < 7; test_id++){ 
      document.getElementById("t"+test_id).addEventListener("click", illu_area()); 

      } 
     } 
    </script> 
    <style type="text/css"> 
     * { margin: 0px; padding: 0px; font-family: Tahoma} 
     .container_main { 
      margin: 10px; 
      width: 300px; 
      height: 300px; 
      background-color: red; 
      position: relative; 
     } 
     .territory_type1 { 
      width: 100px; 
      height: 100px; 
      position: absolute; 
     } 
     .territory_type2_horizontal { 
      width: 200px; 
      height: 100px; 
      position: absolute; 
     } 
     .territory_type2_vertical { 
      width: 100px; 
      height: 200px; 
      position: absolute; 
     } 
     #t6 { 
      background-color: blue; 
      left: 200px; 
     } 
     #t5 { 
      background-color: lightblue; 
      left: 100px; 
     } 
     #t4 { 
      background-color: green; 
     } 
     #t3 { 
      background-color: turquoise; 
      top: 200px; 
     } 
     #t2 { 
      background-color: lightgreen; 
      top: 200px; 
      left: 200px; 
     } 
     #t1 { 
      background-color: brown; 
      top: 100px; 
      left: 200px; 
     } 
     #t0 { 
      background-color: yellow; 
      top: 100px; 
      left: 100px; 
     } 
     .grid { 
      height: 100px; 
      width: 100px; 
      position: absolute; 
      top :0px; 
     } 
     #t3_g2 { 
      left: 100px; 
     } 
     #t4_g2 { 
      top: 100px; 
     } 
    </style> 
</head> 
<body onLoad="everything()"> 
    <div class="container_main"> 
     <div id="t0" class="territory_type1" data-xcoor="0" data-ycoor="0"> 
      Origin 
     </div> 
     <div id="t1" class="territory_type1" data-xcoor="1" data-ycoor="0"> 
      1 
     </div> 
     <div id="t2" class="territory_type1" data-xcoor="1" data-ycoor="-1"> 
      2 
     </div> 
     <div id="t3" class="territory_type2_horizontal"> 
      3 
      <div class="grid" id="t3_g1" data-xcoor="-1" data-ycoor="-1"></div> 
      <div class="grid" id="t3_g2" data-xcoor="0" data-ycoor="-1"></div> 
     </div> 
     <div id="t4" class="territory_type2_vertical"> 
      4 
      <div class="grid" id="t4_g1" data-xcoor="-1" data-ycoor="1"></div> 
      <div class="grid" id="t4_g2" data-xcoor="-1" data-ycoor="0"></div> 
     </div> 
     <div id="t5" class="territory_type1" data-xcoor="0" data-ycoor="1"> 
      5 
     </div> 
     <div id="t6" class="territory_type1" data-xcoor="1" data-ycoor="1"> 
      6 
     </div> 
    </div> 
</body> 
</html>

我的問題是：當我打開這個HTML文件或刷新頁面，顯示警報消息（六次）馬上。我希望它提醒當我點擊一個網格...

注：

它，當我這樣做的工作：

function everything(){ 
      for(var test_id = 0; test_id < 7; test_id++){ 
      document.getElementById("t"+test_id).addEventListener("click", function(){alert("test");}); 

} 
}

但這個心不是會成爲我覺得在未來有用的：P

幫幫我！

來源

2014-10-03 user2998004

你要通過你的函數 - 省略()

.addEventListener("click", illu_area);

具有()立即執行功能。

來源

2014-10-03 19:04:17 tymeJV

謝謝。也感謝信息 – user2998004 2014-10-03 19:17:53

嗯，我有一個類似的問題。如果我想添加像這樣的參數該怎麼辦？ document.getElementById（「t」+ test_id）.addEventListener（「click」，illu_area（test_id））; – user2998004 2014-10-03 19:26:24

使用匿名函數並在該函數內部調用函數（）{illu_area（test_id）}' – tymeJV 2014-10-03 19:27:36

通過For循環選擇和添加函數到Div的

回答

相關問題