Javascript addEventListener仍多次触发（即使使用相同名称的回调）

下面的代码仅将一个事件应用于多个DOM元素。由于这组代码将被多次调用，因此事件将被多次应用于同一元素

通过使用相同的回调函数而不是匿名函数，我避免了再次分配它们，但它们仍然被应用和激发了好几次。我在这里看不到什么

//apply delete event listener to all list items
function applyListener(){
    let delBtnS = document.querySelectorAll(".toDoList li span")
    let checkOff = document.querySelectorAll(".toDoList li");

    //separate function won't have event applied multiple times
    let applyCompleted = function(){
        console.log("Apply has been pressed");
    }

    let applyDelete = function(event){
        console.log("Delete has been pressed");
    }

    //checkOff
    for (let item of Array.from(checkOff)){ 
        item.addEventListener("click", applyCompleted);
    }


    //delete button
        for (let btn of Array.from(delBtnS)){
        btn.addEventListener("click", applyDelete);
    }
}

这是因为DOM树上的事件表示父节点将对事件做出反应，即使事件发生在其子节点上。你需要使用

---

你的意思是，当你点击范围时，它会点击applyCompleted和applyDelete吗？@RicardoPontual不，我理解我可以防止这种情况发生。stopPropagation问题是，每个事件都会多次触发，即使它不应该触发。这很奇怪，因为如果你附加相同的事件签名，这个事件将被丢弃，正如这里所证明的：

let applyDelete = function(event){
    event.stopPropagation(); // click on <span> won't travel to it's parent <li>
    console.log("Delete has been pressed");
}