javascript - 委托(delegate)单击事件仅在第二次单击前进后才起作用

Question

我正在尝试构建和学习 native javascript 事件委托(delegate)(但不确定)，就像这样

function clicked(d) {
  d.innerText = "clicked";
}
document.addEventListener('click', function() {
  var foos = Array.from(document.getElementsByClassName('foo'));
  foos.forEach(function(elm, i) {
    elm.addEventListener('click', function() {
      clicked(elm);
    });
  });
})

document.body.innerHTML = `<div class="foo"></div><div class="foo"></div><div class="foo"></div><div class="foo"></div>`;

.foo {
  height: 100px;
  width: 100px;
  float: left;
  border: 1px solid green;
}

为什么只有在第二次点击转发后才起作用？

我可以使用 jQuery on 方法更改上面的 addEventListener 代码块以使其正常工作，但我只想知道如何使上面的代码表现相似。

Answer 1

事件委托(delegate)使用事件冒泡和 event.target 属性来处理多个子元素的事件，并将单个事件处理程序附加到其父元素(请参阅 Andrew Tetlaw 的 this explanation 以及 Andrew Tetlaw 中的其他示例) this blog post 作者:大卫·沃尔什)。

在您的情况下，您不需要向每个 foo div 添加事件处理程序，因为单击事件是在文档级别处理的。您可以简单地检查单击事件的目标是否具有 foo 类，并将该目标元素传递给 clicked 函数。

function clicked(d) {
  d.innerText = "clicked";
}

document.addEventListener('click', function(e) {
  if (e.target.className === "foo") {
    clicked(e.target);
  }
});

document.body.innerHTML = '<div class="foo"></div><div class="foo"></div><div class="foo"></div><div class="foo"></div>';

.foo {
  height: 100px;
  width: 100px;
  float: left;
  border: 1px solid green;
}