Javascript .addEventListener-长列表

我在我的问题上几乎找不到答案，但我可能没有经验将其处理到我的案例中

我已将项目列表生成到.html

<div id="grid">

是巨大而不优雅的。我尝试过的方法不起作用

for (i = 0; i < 70; i++) {
  'c'+i+'.addEventListener("click", function() { revealCard('+i+'); });'
}

如何为此构建可工作的addEventListener？ 非常感谢。

您可以使用dataset，即在创建dom时添加属性。 然后使用querySelectorAll获取所有带有类card的div，并使用addEventListener对其进行迭代以添加事件。单击元素后，获取数据集值并传递给revealCard函数

var div_block=； 对于let i=0；i<5；i++{ div_block+=`Hello`； } document.getElementByIdgrid.innerHTML=div_块； document.queryselectoral.card.forEachfunctionitem{ item.addEventListener“单击”，函数E{ revealCarditem.dataset.attr } } 函数revealCardnum{ console.lognum }

---

您面临的问题可以通过使用您在每张卡上添加的卡类来解决。然后，为了引用正确的卡片，可以使用关键字this，在addEventListener的上下文中，该关键字将引用接收到单击的任何DOM元素。您也不需要为每个div生成唯一的Id，我认为这是一个很大的优点

您的代码如下所示：

let div_block = "";

for (i = 0; i < 70; i++) {
  div_block = div_block + '<div class="card"></div>';
}

const cards = querySelectorAll(".card");

cards.forEach(card => {
  card.addEventListener("click", revealCard)
})

function revealCard(){
  // Here, `this` refers to the card that was clicked
  // So you can do what you want with it
  console.log(this);
}

---

对brk的答案进行轻微修改，在父级上使用单个事件侦听器，该侦听器将触发子级上的事件

var div_block=； 对于let i=0；i<5；i++{ div_block+=`Hello`； } var grid=document.getElementByIdgrid； grid.innerHTML=div_块； grid.addEventListener“单击”，函数e{ 如果e.target.getAttribute'class'='card'{ revealCarde.target.dataset.attr； } }; 函数revealCardnum{ console.lognum }

---

有多种方法可以做到这一点，但我不会使用ID，也不会绑定X事件侦听器。我将使用事件委派和数据-*属性：

建立您的元素列表：

const grid = document.getElementById("grid");
for (var i = 0; i < 70; i++) {
  const child = document.createElement('div');
  child.className = 'card';
  child.dataset.index = i;
  grid.appendChild(child);
}

const grid=document.getElementByIdgrid； 对于var i=0；i<70；i++{ const child=document.createElement'div'； child.className='card'； child.dataset.index=i； child.innerText=`Card${i}`； grid.appendChildchild； } grid.addEventListener'click'，functionevent{ 让target=event.target； //如果在元素内部单击，则向上遍历 而target.className！==“卡”{ target=target.parentNode； } 如果目标{ revealCardtarget.dataset.index； } }; 心功能{ log`Card${i}显示`； }

---

我找到了最简单的解决方案：

for(var i=0;i<boardSize;i++){
   document.getElementById('c'+i).addEventListener("click",function(){
   revealCard(this.id.substring(1));
   });
}

---

你喜欢什么？

你为什么要构建字符串var c'+i+'=document.getElementByIdc'+i+'；''var c'+i+'=document.getElementByIdc'+i+'；'和'c'+i+'。addEventListenerclick，函数{revealCard'+i+'；}；'正在生成包含JavaScript代码的字符串。代码没有实际计算。因为我不确定如果不捕获元素c0，c1，…，它是否会工作，。。。。从HTML。我只是删除它，它的工作。这意味着.addEventListner可以在没有document.getElementById方法的情况下捕获HTML id？我仍然不知道如何缩短addEventListner。下一步我想将jQuery与$element一起使用；，但是一步一步地：-thx Felix。你的建议对我来说更重要，我会试试看。顺便说一句，一周前我从特伦托度假村回来，在塞拉达做滑雪教练-只是要知道，并不是所有人都在本地支持browsers@JuanCastillo的确为了便于参考，我们可以参考此链接了解哪个浏览器本机支持箭头功能：。

const grid = document.getElementById("grid");
for (var i = 0; i < 70; i++) {
  const child = document.createElement('div');
  child.className = 'card';
  child.dataset.index = i;
  grid.appendChild(child);
}

grid.addEventListener('click', function(event) {
   let target = event.target;
   // traverse up if clicked inside element
   while (target.className !== 'card') {
     target = target.parentNode;
   }
   if (target) {
     revealCard(target.dataset.index);
   }
});

for(var i=0;i<boardSize;i++){
   document.getElementById('c'+i).addEventListener("click",function(){
   revealCard(this.id.substring(1));
   });
}