getElementsByClassName 上的 Javascript onclick 事件

Question

我有一個 svg 地圖，我將它放入對象中，我正在嘗試創建所有帶有可點擊 id 的路徑。

為此，我這樣做是為了獲取 svg 對象：

 let a = document.getElementById("biharsvg")

我把它放到 svg doc 中是這樣的：

   var svgDoc = a.contentDocument;

現在我使用這個獲取某些類的所有值：

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

我還可以使用以下方法獲取屬性 id 值：

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

}

我想在每個屬性 id 上添加一個點擊事件並在我這樣做時獲取值：

var i;
for (i = 0; i < de.length; i++) {
  var j = de[i].getAttribute("id");
   console.log(j);
  svgDoc.getElementById(j).onclick = function() {
      modal.style.display = "block";  
        console.log(this.getAttribute("id"));
    }
}

這工作正常，我正在獲取所有值，但在 jquery 中我可以使用它：

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

有什么辦法可以在沒有循環的情況下在javascript中使用這樣的東西。 我的問題是在 javascript 中進行這項工作的最佳方法是什么。

Answer 1

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).click(function(){...}時，它也會在內部循環。

---

正如評論的那樣，使用箭頭函數，您可以進一步縮短代碼

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

 var de = document.querySelectorAll('span'); Array.from(de).forEach(el => el.addEventListener('click', function () { alert(this.id); }))

 span { display: inline-block; padding: 20px; margin: 0 5px; border: 1px dotted black; } span::after { content: attr(id) }

 <span id="nr1">click </span> <span id="nr2">click </span> <span id="nr3">click </span>

---

根據評論更新。

現有循環與上述循環之間的主要區別在於，上述循環效率更高，代碼更簡潔/更短。

在你原來的循環中

var i;
for (i = 0; i < de.length; i++) {
  var j = de[i].getAttribute("id");
   svgDoc.getElementById(j).onclick = function() {
      modal.style.display = "block";  
        console.log(this.getAttribute("id"));
    }
}

您遍歷元素數組de ，獲取其id ，然后使用getElementById進行新調用以獲取您已有的元素。

使用保留的語法/邏輯，您現有的代碼可以簡化為這樣的

for (var i = 0; i < de.length; i++) {
    de.onclick = function() {
        modal.style.display = "block";  
        console.log(this.getAttribute("id"));
    }
}

Answer 2

我只想展示一種替代方法，由 CBroe 指出，其中單擊文檔檢查其事件目標：

 let de = Array.from(mylist.getElementsByClassName("fil0")); document.addEventListener('click', function(e) { const el = e.target; if (de.indexOf(el) < 0) return false; alert(el.innerHTML); });

 <ul id="mylist"> <li>one</li> <li class="fil0">two*</li> <li class="fil0">three*</li> </ul> <p>* has click event assigned indirectly</p>

這有一個額外的好處，它只使用單個處理程序函數，如果indexOf()條件更改為類似classList.contains() ，它甚至可以用於尚不存在的元素。

Answer 3

我發現for..of是最方便和可讀的語法：

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