EventListener 不会通过点击 div 触发

Question

我使用 Javascript 动态创建多个 div

var cart = document.createElement("div");
cart.classList.add("buy-item");
cart.setAttribute("name", "buy-food"); 
div.appendChild(cart);

当我用“buy-item”class 收集所有元素时，我将元素作为 HTMLCollection 获取，但是当我想知道它何时被点击时，什么也没有发生

var elements = document.getElementsByClassName("buy-item");
console.log(elements)

function addFoodToCart() {
    console.log("One of buy-item class itemes was clicked")
};

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', addFoodToCart);
}

HTML 元素看起来像这样

<div class="food-wrap dynamic-food">
 <img class="food-item-img" src="/img/foodItem.png">
 <p class="food-title">Csípős</p><p class="food-price">190</p>
 <div class="buy-item" name="buy-food"></div>
 <div class="tooltip">
  <span class="tooltiptext">Csípős szósz</span>
 </div>
</div>

Answer 1

tl;dr：将事件侦听器添加到父 div（包含您拥有/将要创建的所有其他元素的那个）并使用event.target来了解单击了哪个。

不确定这是否有帮助，如果这是您的情况，但您可以从 Javascript 中的事件冒泡和事件委托的理解中受益。

在下面的示例中，运行代码并单击每个段落。 控制台日志将显示您单击了哪个元素。

 function findTheOneClicked(event) { console.log(event.target) } const mainDiv = document.getElementById("parent"); mainDiv.addEventListener('click', findTheOneClicked);

 <div id="parent"> <p>"Test 1"</p> <p>"Test 2"</p> <p>"Test 3"</p> </div>

当您有一个带有许多其他元素的元素并且您想对它们做一些事情时，或者当您想将事件处理程序添加到页面上不可用（尚未创建）的元素时，这非常好。

关于这个主题的好读物： https://javascript.info/bubbling-and-capturing