如何添加事件监听器<li>在滚动上克隆的</li>

Question

我有这个滚动 div，如果你滚动，它会克隆 li 标签并将它们放在最后，这样你就有了无限滚动。 这是代码：

infinite() {
  // it's a div, that holds your news
  // it holds ul with news in li elements
  const div = document.getElementById("container");
  div.addEventListener("scroll", function () {
    const maxScroll = this.scrollHeight - this.clientHeight;
    const currentScroll = this.scrollTop;
    const bottom = 100;
    if (currentScroll + bottom >= maxScroll) {
      const ul = document.getElementsByTagName("ul")[0];
      const current = parseInt(ul.dataset.current, 10);
      const li = document.querySelectorAll("li")[current];
      const newLi = li.cloneNode(true);
      ul.appendChild(newLi);
      ul.dataset.current = current + 1;
      console.log(li);
    }
  });
},

这对我来说很完美。 但是，创建节点后，我无法将事件侦听器放在最新克隆的 li 上，因为它们不在 DOM 中。 如何强制 JS 将事件监听器放在新克隆的节点上？ 这是 function ：

 hover() {
  const rows = document.getElementsByClassName("plugin");
  rows.forEach((row) => {
    row.addEventListener("mouseover", () => {
      row.style.opacity = 1;
    });

    row.addEventListener("mouseout", () => {
      row.style.opacity = 0.3;
    });
  });
},

Answer 1

只是委托

div.addEventListener("mouseover", e => {
  const tgt = e.target;
  if (tgt.tagName === "LI") tgt.style.opacity = 1;
})
div.addEventListener("mouseout", e => {
  const tgt = e.target;
  if (tgt.tagName === "LI") tgt.style.opacity = .3;
});

或者干脆使用 CSS

#container li { opacity: .3 }    
#container li:hover { opacity: 1 }