getElementsByClassName上的Javascript onclick事件

我有一个svg映射，我把它放到对象中，我试图创建所有id可点击的路径

为此，我这样做是为了获得svg对象：

 let a = document.getElementById("biharsvg")

我将其放入svg文档中，如下所示：

   var svgDoc = a.contentDocument;

现在我用这个得到了某个类的所有值：

  let de = svgDoc.getElementsByClassName("fil0");

var i;
for (i = 0; i < de.length; i++) {
  var j = de[i].getAttribute("id");
   console.log(j);

}

我还可以使用以下方法获取属性id值：

  let de = svgDoc.getElementsByClassName("fil0");

var i;
for (i = 0; i < de.length; i++) {
  var j = de[i].getAttribute("id");
   console.log(j);

}

---

有没有办法在javascript中使用类似的东西而不使用循环。我的问题是，用javascript实现这一点的最佳方式是什么。

jQuery的javascript版本

$(de).click(function(){
   alert(this.getAttribute("id"));
});

大概是

Array.from(de).forEach( function(el){
    el.addEventListener('click', function() {
        alert(this.getAttribute("id"));
        // or "this.id" should work too
    });
});

需要注意的是，当使用jQuery执行

$（de）.单击（function（）{…}

时，它也会在内部循环

---

如前所述，通过使用，您可以进一步缩短代码

Array.from(de).forEach(el => el.addEventListener('click', function () {...}))

var de=document.querySelectorAll（'span'）；
Array.from（de）.forEach（el=>el.addEventListener（'click'，function（）{
警报（this.id）；
}))

span{
显示：内联块；
填充：20px；
利润率：0.5px；
边框：1px点黑色；
}
span：：之后{
内容：属性（id）
}

点击
点击
单击

我只想显示CBroe指出的另一种方式，即在文档上单击会检查其事件目标：

let de=Array.from（mylist.getElementsByClassName（“fil0”）；
document.addEventListener（'click'，函数（e）{
常数el=e.目标；
如果（de.indexOf（el）<0）返回false；
警报（el.innerHTML）；
})；

一个
两个*
三个*

*已间接指定click事件

我发现for..of是最方便和可读的语法：

for (const element of svgDoc.getElementsByClassName("fil0")) {
  console.log(element.id);
}

---

不，没有。为什么不使用jQuery？我在试着理解我可以在没有循环的普通javascript中做到这一点吗？不，你不能。为什么不使用jQuery？如果你想避免在每个元素中添加单独的处理程序，那么事件委派的基本原则在vanilla JS中也“起作用”。如果你写

$（de），jQuery也会使用循环。单击（

，然后jQuery在内部循环通过

$（de）

创建的结果集中的所有元素，并将给定的事件处理程序附加到每个元素，它们只是“隐藏”它在他们的代码中。这是我在循环中做的相同的事情，还是不同的或更好的版本。需要解释吗？用一行额外的javascript，你可以删除一个240kb的库…对我来说似乎是一个不错的交易：）@user2480754循环一组元素（例如元素）是一种更高效、更干净/更短的方法，您现有的

for..loop

执行相同的工作though@Pete当然（用注释更新）…我们关注的是

forEach

vs jQuery internalloop@user2480754我用解释更新了我的答案。让我知道它是否有意义。