有人知道為什么第一個 onClick 事件不能正常工作，而第二個卻能正常工作？

Question

我在嘗試創建在第一個框中看到的 onClick 事件並通過創建在第二個框中看到的第二種方法來修復它時遇到了這個問題，但我不明白為什么第一種方法不起作用，有人知道為什么?

 function test() { document.body.style.padding = "0"; document.body.style.margin = "0"; document.body.style.backgroundColor = "#222"; let container = document.createElement("div"); let first_box = document.createElement("div"); let second_box = document.createElement("div"); container.appendChild(first_box); container.appendChild(second_box); document.body.appendChild(container); container.style.height = "150px"; container.style.display = "flex"; container.style.justifyContent = "center"; container.style.alignItems = "center"; first_box.style.height = "50%"; first_box.style.width = "20%"; first_box.style.backgroundColor = "#fff"; first_box.style.cursor = "pointer"; first_box.style.marginRight = "2%"; second_box.style.height = "50%"; second_box.style.width = "20%"; second_box.style.backgroundColor = "#fff"; second_box.style.cursor = "pointer"; //onClick event let btn1_status = 0; let btn2_status = false; if (btn1_status === 0) { first_box.onclick = function() { this.style.backgroundColor = "#456"; btn1_status = 1; }; } else if (btn1_status === 1) { first_box.onclick = function() { this.style.backgroundColor = "#fff"; btn1_status = 0; }; }; function box2() { if (btn2_status === false) { second_box.style.backgroundColor = "#654"; btn2_status = true; } else if (btn2_status === true) { second_box.style.backgroundColor = "#fff"; btn2_status = false; }; }; second_box.onclick = function() { box2(); }; }; console.log(test());

Answer 1

問題出在first_box ：由於test()函數執行一次，它只附加第一個事件偵聽器，所有這部分：

} else if (btn1_status === 1) {
    first_box.onclick = function() {
      this.style.backgroundColor = "#fff";
      btn1_status = 0;
    };
  };

實際上是死代碼（假設函數運行一次）。 多次運行test實際上會添加一個事件偵聽器，造成極大的執行混亂（以及內存泄漏）。

這是一個更正的解決方案：

 function test() { document.body.style.padding = "0"; document.body.style.margin = "0"; document.body.style.backgroundColor = "#222"; let container = document.createElement("div"); let first_box = document.createElement("div"); let second_box = document.createElement("div"); container.appendChild(first_box); container.appendChild(second_box); document.body.appendChild(container); container.style.height = "150px"; container.style.display = "flex"; container.style.justifyContent = "center"; container.style.alignItems = "center"; first_box.style.height = "50%"; first_box.style.width = "20%"; first_box.style.backgroundColor = "#fff"; first_box.style.cursor = "pointer"; first_box.style.marginRight = "2%"; second_box.style.height = "50%"; second_box.style.width = "20%"; second_box.style.backgroundColor = "#fff"; second_box.style.cursor = "pointer"; //onClick event let btn1_status = 0; let btn2_status = false; first_box.onclick = function() { if (btn1_status === 0) { this.style.backgroundColor = "#456"; btn1_status = 1; }else if (btn1_status === 1) { this.style.backgroundColor = "#fff"; btn1_status = 0; } }; function box2() { if (!btn2_status) { second_box.style.backgroundColor = "#654"; btn2_status = true; } else { second_box.style.backgroundColor = "#fff"; btn2_status = false; }; }; second_box.onclick = function() { box2(); }; }; console.log(test());