选择并向Div'添加函数;s通过For Loop

Selecting and Adding Functions to Div's via For Loop

本文关键字：函数通过 For Loop 添加选择 Div 更新时间：2023-09-26

我想快速选择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

帮帮我！

您必须传递函数-省略()

.addEventListener("click", illu_area);

让()立即执行该功能。