为什么我的 ForEach 会复制我的控制台日志？

Question

我有 3 个无线电 btns，每当我单击一个时，它应该记录“选项”，但它是登录两次。

例如：

var options = document.querySelectorAll(".publish-option-container");
options.forEach(option => {
    option.addEventListener("click", ()=>{
        console.log("option");

    })
});

它应该只显示“选项”，但它显示 2“选项”

有人可以帮我吗？

Answer 1

如果没有您的 HTML，我们不能肯定地说，但更好的选择是事件委托，它允许您在要设置事件处理程序的元素的共同祖先元素上设置单个事件处理程序，而无需任何完全循环。

 // Just set up a single event handler at a common ancestor document.querySelector(".options").addEventListener("click", function(event){ // Determine if the event originated at an element you care to handle if(event.target.classList.contains("option")){ console.log(event.target.value); } });

 <div class="options"> <input type="radio" name="foo" value="1" class="option">1<br> <input type="radio" name="foo" value="2" class="option">2<br> <input type="radio" name="foo" value="3" class="option">3<br> </div>