javascript - removeEventListener 不适用于动态分配的元素

Question

我不明白为什么单击 div2 元素后 div1 元素仍然分配了事件监听器。似乎 specialFunction() 的 div 参数在初始执行后和单击 div2 后是 div1 元素，其中应该从 div1 中删除监听器，但事实并非如此。

感谢您的建议。

let div1 = document.createElement("div");
div1.innerHTML = "div1"
document.body.appendChild(div1);

let div2 = document.createElement("div");
div2.innerHTML = "div2";
document.body.appendChild(div2);

specialFunction(div1, false);

div2.addEventListener("click", function()
{
    console.log("div2 clicked");
    specialFunction(div1, true);
});

function specialFunction(div, remove)
{
    function divFunc()
    {
        console.log("div1 clicked");
    }
    
    if(remove)
        div.removeEventListener("click", divFunc);
    else
        div.addEventListener("click", divFunc);
}

div{ height: 50px; border: 1px solid black; }

Answer 1

亲爱的 friend ，您的问题是:divFunc() 地方,此函数是 specialFunction() 的局部函数第二次调用此函数时，创建一个新函数。并且新的函数对象不等于最后一个!

试试这个:

let div1 = document.createElement("div");
div1.innerHTML = "div1";
document.body.appendChild(div1);

let div2 = document.createElement("div");
div2.innerHTML = "div2";
document.body.appendChild(div2);

specialFunction(div1, false);

div2.addEventListener("click", function () {
    console.log("div2 clicked");
    specialFunction(div1, true);
});
function divFunc() {
    console.log("div1 clicked");
}
function specialFunction(div, remove) {


    if (remove)
        div.removeEventListener("click", divFunc);
    else {
        hnd = div.addEventListener("click", divFunc);
        console.log(hnd)
    }
}