循环方法

Question

我不明白为什么div1元素在单击div2元素后仍仍分配了事件侦听器。似乎specialFunction()的{{1}}参数是在初始执行后并且单击div之后的div1元素，这应该从div2中删除侦听器，但是它没有t。

谢谢您的建议。

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

Answer 1

亲爱的朋友，您的问题是： 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)
    }
}

Answer 2

循环方法

对于那些在循环中创建元素的人：

// 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。

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

2 个答案:

循环方法