通过 For 循环选择和添加函数到 Div答案

【问题标题】：Selecting and Adding Functions to Div's via For Loop通过 For 循环选择和添加函数到 Div
【发布时间】：2014-10-03 19:01:17
【问题描述】：

我想快速选择 div，所以我编写了一个 for 循环来选择所有 div 并向它们快速添加函数，而不是“onClick='blahblah'”方法。这是我的代码：

<!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

帮帮我！

【问题讨论】：

标签： javascript html css loops for-loop

【解决方案1】：

你必须传递你的函数 - 省略 ()

.addEventListener("click", illu_area);

拥有() 会立即执行函数。

【讨论】：

嗯我也有类似的问题。如果我想添加这样的参数怎么办？ document.getElementById("t"+test_id).addEventListener("click", illu_area(test_id));
使用匿名函数并从 "click", function() { illu_area(test_id) } 中调用您的函数