javascript - 你好。我尝试单击 div 的所有元素，但现在可以了

Question

我尝试单击所有 div，但事件适用于最后一个 div。如何为每个div调用函数？ 我想知道哪个 div 被点击了 javascript 调用函数。

<svg height="300" width="300" class="centerization">
    <style>
        .es{
            margin-top: 30px;
        }
        .es:hover {
            cursor: pointer;
        }
    </style>
    <rect height="40" width="80" fill="blue" rx="5" ry="5" class="es"> 
    </rect>
    <rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" 
    x="100"></rect>
    <rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" 
    x="200"></rect>
    <rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" 
    y="100"></rect>
    <rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" 
    y="100" x="100"></rect>
    <rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" 
    y="100" x="200"></rect>
    <rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" 
    y="200"></rect>
    <rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" 
    y="200" x="100"></rect>
    <rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" 
    y="200" x="200"></rect>
</svg>

var svg = document.getElementsByClassName("es");
for (var property in svg) {
    svg[property].addEventListener("click",function(){
        alert("clicked"+svg[property]);
    });
};

Answer 1

getElementsBy* 方法返回 HTMLCollections，这可能很难使用。考虑使用 querySelectorAll，它返回一个静态 NodeList - 与 HTMLCollection 不同，它可以直接迭代，迭代时不会改变，而且更加灵活。

document.querySelectorAll('.es')
  .forEach((es) => {
    es.addEventListener('click', () => alert('clicked ' + es.outerHTML));
  });

.es {
  margin-top: 30px;
}

.es:hover {
  cursor: pointer;
}

<svg>
<rect height="40" width="80" fill="blue" rx="5" ry="5" class="es">
</rect>
<rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" x="100"></rect>
<rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" x="200"></rect>
<rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" y="100"></rect>
<rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" y="100" x="100"></rect>
<rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" y="100" x="200"></rect>
<rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" y="200"></rect>
<rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" y="200" x="100"></rect>
<rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" y="200" x="200"></rect>
</svg>