如何使用 javascript 为页面中所有元素添加事件监听器，他们的孩子在我的数组中

Question

我的页面中有带有 ID 的元素。我还有一个数组，其中包含 ID。

const locations = [{
    "location": "hauptbahnhof",
    "color": "Magenta"
  },
  {
    "location": "Kröpke",
    "color": "Yellow"
  },
  {
    "location": "KröpckeUhr",
    "color": "Green"
  },
]
for (var i = 0; i < locations.length; i++) {
  var ids = locations[i].location;
  console.log(ids);
}

<div id="container">
  <div id="hauptbahnhof">Hauptbahnhof</div>
  <div id="Kröpke">Kröpke</div>
  <div id="KröpckeUhr">Kröpcke Uhr</div>
  <div id="Drumstreet">Drumstreet</div>
</div>

它给了我所有的位置。现在我想为我页面中的所有 Objects 添加 Eventlistener，该数组使用 javascript.

包含他们的 ID

Answer 1

通过id获取元素并在其上添加事件监听器机智功能 element.addEventListener("click", myFunction); 出于演示目的，相应的 div 将在单击时显示为红色。

在提交后进行编辑

检查id搜索后的元素是否存在:

const element = document.getElementById(locationId)
if (element) {
  // add listener
}

const locations = [{
    "location": "hauptbahnhof",
    "color": "Magenta"
  },
  {
    "location": "Kröpke",
    "color": "Yellow"
  },
  {
    "location": "KröpckeUhr",
    "color": "Green"
  },
  {
    "location": "nonExistingElement",
    "color": "Green"
  },
]

for (var i = 0; i < locations.length; i++) {
  var locationId = locations[i].location;
  console.log(locationId);
  const element = document.getElementById(locationId)
  if (element) {
    element.addEventListener("click", myFunction);

    function myFunction() {
      element.style.color = "red";
    }
  } else {
    // ID is not in the html elements
  }
}

<div id="container">
  <div id="hauptbahnhof">Hauptbahnhof</div>
  <div id="Kröpke">Kröpke</div>
  <div id="example">no event on this</div>
  <div id="KröpckeUhr">Kröpcke Uhr</div>
  <div id="Drumstreet">Drumstreet</div>
</div>

Answer 2

我不确定我是否理解正确，但这是你想要的吗？

for (var i = 0; i < locations.length; i++) {
  document.getElementById(locations[i].location).addEventListener("click", function(){
    //
  });
}

Answer 3

在文档上添加点击侦听器并检查点击的项目是否匹配

const locations = [
  {"location": "hauptbahnhof", "color": "Magenta"},
  {"location": "Kröpke", "color": "Yellow"},
  {"location": "KröpckeUhr", "color": "Green"},
];

const ids = locations.map(l => l.location);

document.addEventListener('click', function (e) {
   console.log(e.target.id);
   if (ids.indexOf(e.target.id) > -1) {
     console.log('Do something here');
   }
});

<div  id="container">
  <div id="hauptbahnhof">Hauptbahnhof</div>
  <div id= "Kröpke">Kröpke</div>
  <div id = "KröpckeUhr">Kröpcke Uhr</div>
  <div id= "Drumstreet">Drumstreet</div>
</div>

如何使用 javascript 为页面中所有元素添加事件监听器，他们的孩子在我的数组中

How to add Eventlistener for all Elements in the page which thier ids are inside my Array using javascript

javascript

arrays

event-listener