委托点击事件仅在第二次向前点击后工作

Question

我正在尝试像这样构建和学习本机 javascript event delegation（虽然不确定）

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

事件委托使用事件冒泡和event.target 属性来处理多个子元素的事件，其中单个事件处理程序附加到它们的父元素（参见 Andrew Tetlaw 的 this explanation 和 David Walsh 的 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;
}

Answer 2

这是因为在您点击一次document 之前，您的 div 上的点击处理程序尚未设置。

• 删除document 上的点击处理程序。
• 在尝试选择类之前写入 dom

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

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

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

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