为何第二个click事件不生效？JavaScript事件监听问题解析

先看你写的原代码：

let div = document.createElement("div");
let text_content = document.createTextNode("Lorem Ipsum");
let action = 0;

div.appendChild(text_content);
document.body.appendChild(div);
div.className = "div1";

if (action == 0){
    div.addEventListener("click", () => {    
        document.querySelector(".div1").innerText = "Hello World!";
        action = 1;
    });
}

if (action == 1){
    div.addEventListener("click", () => {
        document.querySelector(".div1").innerText = "Hallo Welt!";
    });
}

问题出在代码执行时机 #

• 代码初始化时，action的初始值是0，所以第一个if条件成立，给div绑定了第一个点击事件。
• 但第二个if判断是在页面加载时一次性执行的，此时action还是0，条件不成立，第二个点击事件根本没绑定到div上。
• 就算你点完div把action改成1，也不会再触发第二个if的执行——因为这些if只会在代码第一次运行时检查一次，不会因为后续变量变化重新执行绑定逻辑。

修正后的代码逻辑（功能正常版本） #

let div = document.createElement("div");
let text_content = document.createTextNode("Lorem Ipsum");
let action = 0;

div.appendChild(text_content);
document.body.appendChild(div);
div.className = "div1";

div.addEventListener("click", () => {  
    if (action == 0){
        document.querySelector(".div1").innerText = "Hello World!";
        action = 1;
    }else if (action == 1){
        document.querySelector(".div1").innerText = "Hallo Welt!";
        action = 0;
    }
});

修正后的写法是把action的判断放到了点击事件的回调函数内部：

• 只需要给div绑定一次点击事件，每次点击时都会实时检查当前action的数值，执行对应的文本修改逻辑。
• 点击后修改action的值，下次点击时就会触发另一个分支的逻辑，实现文本切换的效果。

内容的提问来源于stack exchange，提问作者grotivanhelden