如何添加事件監聽器<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 }