javascript - addEventListener 到多个元素，使用事件委托(delegate) (JavaScript)

Question

我正在尝试向多个元素添加一个事件。现在，我有这段代码并且可以正常工作。但是，我想使用事件委托(delegate)并将监听器移动到父元素(deck)。我已经尝试了很多在 Stack 上找到的解决方案，但没有一个有效。
问题是，哪种方式是委托(delegate)事件的最佳方式？

HTML

<section class="deck">
    <div class="card">
        <div class="front"></div>
        <div class="back">
            <img src="#" alt="">
        </div>
    </div>
    <div class="card">
        <div class="front"></div>
        <div class="back">
            <img src="#" alt="">
        </div>
    </div>
    ...

JavaScript

var card = document.querySelectorAll(".card");
var len = card.length;

for (let i = 0; i <= len; i++) {
    card[i].onclick = function () {
        this.classList.add("foo");
    }
}

Answer 1

在您的情况下，简单的事件委托(delegate)可能如下所示:

var deck = document.querySelector(".deck");

deck.addEventListener('click', function (e) {
  var target = e.target

  if (target.classList.contains('card')) {
    target.classList.add('foo') 
  }
})

请注意，此检查 target.classList.contains('card') 是必需的，以便您仅将类 foo 添加到类 .card< 的元素.