在javascript中将EventListener定义为ul List项目时遇到问题

Question

我正在将javascript中的列表项添加到ul id“ showingDeck”。我想初始化li类'card'，并添加addEventListener，然后单击该类后将更改列表项的类（CSS格式）。

for (var i = 0; i < shuffledCards.length; i++) {
    var ul = document.getElementById("showingDeck");
    var li = document.createElement("li");
    li.innerHTML = shuffledCards[i];
    li.className = 'card';
    document.getElementById("showingDeck").appendChild(li);
    document.getElementById("showingDeck").addEventListener("click", processClicks(li));
};

processClicks被触发16次，没有点击，也没有点击被注册。

Answer 1

Event Delegation

如果您要动态添加<li>，那么事件将永远不会拖延他们。标签必须在页面加载时存在才能注册。因此，您需要使用 Event Delegation 。

• 首先获得一个符合两个条件的标签：

  1. 页面加载时必须存在。
  2. 必须是您想要单击，悬停等的标签的祖先（父代或父代的父代，等等）。

• 接下来将所述标记注册到事件中（顺便说一下，祖先标记甚至可以是document或window，但建议您将它们用于键事件或非DOM事件）< / p>

  ancestorTag.addEventListener('event', callback);
  

• 只要在祖先标签上触发了已注册的事件或其后代（子项或子项等），就会调用回调函数。

• 在此期间，祖先标记现在可以被称为event.currentTarget，更重要的是，实际被单击，悬停在erc上的标记现在被称为{{3} }。

• 该标签是否具有#id，.className，学生ID或其他任何内容都没有关系，因为event.target将专门用作该标签（在这方面：{ {1}}。

---

优点

• 您只需要一个事件监听器即可获得无限数量的标签

具有动态添加标签的

• 问题已解决

• 否this，#ids，出生证明等。需要识别点击的标签。

缺点

• 没有，这就是为什么我们不应该使用event.target或将事件监听器添加到一百个标签中的原因。

---

演示

.classNames

var list = document.getElementById('list');

list.addEventListener('click', callback);

function callback(event) {
  var clicked = event.target;
  var listener = event.currentTarget;
  if (clicked !== listener) {
    clicked.classList.toggle('active');
  } else {
    return false;
  }
  return false
}

.active {
  color: gold;
  background: #000;
}