时间戳

首页 > 解决方案 > addEventListener 仍然多次触发（即使使用同名回调）

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);
    }
}

标签： javascriptdom-eventsaddeventlistener

解决方案

这是因为事件沿 DOM 树向上传播，这意味着即使事件发生在子节点上，父节点也会对事件做出反应。您需要使用stopPropagation

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

推荐阅读