Question

我正在尝试向多个元素添加事件。现在，我有这个代码，它的工作原理。但是，我想使用事件委派并将监听器移动到父元素（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>
    ...

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')是必要的，因此您只需将课程foo添加到课程为.card的元素。

Answer 2

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

单击的元素（click事件的目标）可能是img。您想将foo添加到作为目标祖先的卡片元素中。 nearest（）方法找到该元素。

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

2 个答案: