Question

我有一个库存，里面有一些插槽。通过客户端的某些操作，appendChild函数会将新项添加到这些插槽中。

＆＃13;

<div id="letters">

  <div class="slot">
    <div class="item">
      <img src="...">
    </div>
  </div>
  
  <div class="slot"></div>
  
  <div class="slot">
    <div class="item">
      <img src="...">
    </div>
  </div>
  
</div>

＆＃13;

使用以下代码，我尝试为每个插槽触发mouseover事件。

＆＃13;

var items = document.querySelectorAll(".item");

items.forEach(function(element) {
  element.addEventListener("mouseover", function () {
    //Stuff
  });  
});

＆＃13;

它工作得非常好，但是当我向类slot添加一个新项目时，这个项目不会触发该事件。

有人可以猜出这个问题吗？

非常感谢！

修改每当我追加一个新项目时，我也通过添加一个新的eventListener解决了这个问题。在使用它们之前必须添加EventListener（非常明显），在我的代码中，我正在使用它们，就像它们是onmouseover函数一样。

Answer 1

在追加后，您需要将事件侦听器添加到新元素，因为它在您最初创建事件侦听器时不存在。

Answer 2

您需要在创建后将处理程序添加到新构造的元素中。

var items = document.querySelectorAll(".item");

function attachMouseOverHandler(element) {
    element.addEventListener("mouseover", mouseOverHappened);
}
items.forEach(attachMouseOverHandler);

function addNewElement(element) {
    attachMouseOverHandler(element);
}

Answer 3

这是一个使用单个延迟事件监听器的解决方案，因此您不必动态添加新的事件监听器：

＆＃13;

document.getElementById('letters').addEventListener('mouseover', function (event) {
  const element = event.target;

  if (!element.matches('.item')) return;

  //Stuff
  console.log(element.textContent.trim());
})

＆＃13;

<div id="letters">

  <div class="slot">
    <div class="item">
      Foo
    </div>
  </div>
  
  <div class="slot">I do not match .item</div>
  
  <div class="slot">
    <div class="item">
      Bar
    </div>
  </div>
  
</div>

＆＃13;

附加节点不会触发JavaScript事件

3 个答案: