removeEventListener не работает с динамически назначенным элементом

Question

Я не понимаю, почему элемент div1 все еще назначил прослушиватель событий после нажатия на элемент div2. Кажется, что параметр specialFunction() div является элементом div1 после начального выполнения и после нажатия на div2, который должен удалить слушателя из 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

петлевый подход

Для тех, кто создает элементы в цикле:

// I suggest to run this code on full page...
    for(let i = 1; i<=5; i++)
    {
        let div = document.createElement("div");
        div.innerHTML = "div "+i;
        document.body.appendChild(div);

        let removeEvent = document.createElement("span");
        removeEvent.innerHTML = "removeEvent "+i;
        removeEvent.setAttribute("class", "removeEvent");
        div.appendChild(removeEvent);
        
        function divFunc(e)
        {
            console.log(`${div.tagName} ${i} ${e.type}ed ${this.dcp.p1} ${div.dcp.p2()} ${this.dcp.p3[2]} ${div.dcp.p4.json[0]}-${this.dcp.p4.json[1]}`);
        }

        specialFunction(div, false, i, divFunc);

        removeEvent.addEventListener("click", e=>
        {
            e.stopPropagation();
            specialFunction(div, true, i, divFunc);
        });
    }



    function specialFunction(div, remove, i, divFunc)
    {
        div.dcp = { // dynamically created parameters
            p1: "by",
            p2: function(){ return "mouse"; },
            p3: [undefined, null, "with random key:"],
            p4: {json: JSON.parse(`[
                "${Math.random().toString().substring(2,10)}", "${i}"
            ]`)}
        };

        if(remove)
        {
            console.log("removed event "+i);
            div.removeEventListener("click", divFunc);
        }
        else
            div.addEventListener("click", divFunc);
    }

*{ margin: 5px;}
div{ border: 1px solid #000000; padding: 10px;}
.removeEvent{ background: red; border: 1px solid #000000; }

console.log(`${div.tagName} ${i} ${e.type}ed ${this.dcp.p1} ${div.dcp.p2()} ${this.dcp.p3[2]} ${div.dcp.p4.json[0]}-${this.dcp.p4.json[1]}`);

показывает, что вы можете легко использовать динамически создаваемые внутренние локальные переменные, такие как div или i, внутри функции события, а также внешние свойства div.dcp объекта. Обратите внимание, что this.dcp эквивалентно div.dcp.

Answer 2

дорогой друг, твоя проблема: 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)
    }
}