使用事件委派（JavaScript）将EventListener添加到多个元素

我正在尝试向多个元素添加事件。现在，我有了这个代码，它可以工作了。但是，我想使用事件委派并将侦听器移动到父元素（deck）。我尝试了在Stack上找到的许多解决方案，但没有一个有效。
问题，哪种方式是委派活动的最佳方式

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>
    ...

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

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

...

JavaScript

<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>
    ...

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

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

var-card=document.queryselectoral（“.card”）；
var len=卡的长度；
对于（设i=0；i简单事件委派在您的案例中可能是这样的：

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'）
是必要的，这样您就可以只将class
foo
添加到class
为.card
的元素中

var deck = document.querySelector('.deck');
deck.onclick = function(clickevent)
{
   if (clicked.target.closest('.card'))
      clickevent.target.closest('.card').classList.add('foo');
}

例如，被单击的元素（单击事件的目标）可能是
img
。您希望将
foo
添加到作为目标祖先的card元素中。最接近的（）方法会找到该元素。
为什么要从父级委派事件？以后是否动态添加card元素？