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

Question

我正在尝试向多个元素添加一个事件。现在，我有这段代码并且可以正常工作。但是，我想使用 Event Delegation 并将侦听器移动到父元素（deck）。我已经尝试了很多在 Stack 上找到的解决方案，但其中 none 有效。
问题，委托活动的最佳方式是什么？

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

在您的情况下，简单的事件委托可能如下所示：

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.

的元素

Answer 2

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

被点击的元素（点击事件的目标）可能是 img。您想要将 foo 添加到作为目标祖先的卡片元素。 closest() 方法找到该元素。

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

addEventListener to multiple elements, using Event Delegation (JavaScript)

javascript

addeventlistener

event-delegation