事件監聽器console.log兩次

Question

我有一個事件偵聽器，每次單擊所需的元素時，都會將console.log打印兩次。 第一次獲取null或未定義，第二次獲取所需的元素。 為什么會發生這種情況？ 代碼很簡單：

document.addEventListener("click", function(e) {
  var id = document.getElementById(e.target.value);
  console.log(id);
  id.style.display="block";
});

Answer 1

捕獲對文檔的任何單擊，然后檢查clicked元素是否包含您要查找的類。 這也適用於頁面加載后由JavaScript動態添加到頁面的元素。

 // Add click event to all buttons document.addEventListener("click", function(event) { if(event.target.classList.contains("clickme")) { //do something with the clicked element: console.log("Button clicked:"); console.log(event.target.innerHTML); } }); 

 <button class='clickme'>Button 1</button> <button class='clickme'>Button 2</button>