Javascript 试图将eventListener添加到组件，但它破坏了我的应用程序

我正在尝试向组件添加eventListener，但它破坏了我的应用程序

import "./button.scss";

document.getElementById('change-theme-btn').addEventListener('click', function () {
   document.body.classList.toggle('pink-background');
});

const button = '<button id="change-theme-btn">Button</button>';

export default button;

---

您不能将侦听器添加到尚未在DOM中的DOM节点。由于getElementById找不到该按钮，您应该有一个错误，即无法调用null的addEventListener。要解决此问题，您可以使用事件委派：

window.addEventListener('click', function(e) {
    var element = e.target;
    var matches = element.msMatchesSelector || element.matches;
    if (matches.call(element, "#change-theme-btn")) {
       document.body.classList.toggle('pink-background');
    }
});

---

我敢肯定，在你的按钮实际出现在页面上之前，你甚至添加了正在运行的listener。我建议将它放在一个函数中，并在引用该函数的按钮上添加一个单击。见下文

import "./button.scss";
window.buttonClick = function(e) {
  document.body.classList.toggle('pink-background');
};

const button = '<button onclick="buttonClick()" id="change-theme-btn">Button</button>';

export default button;

---

它到底是如何破坏你的应用程序的？我打赌addEventListener不是null的函数？但是，是的，OP需要给我们更多的信息。我很确定，在你的按钮实际出现在页面上之前，你甚至可以添加正在运行的侦听器。我建议将它放在函数中，并向引用该函数的按钮添加一个onload。需要是window.buttonClick=function，然后它就可以工作了！对不起，我一直在React工作，不必为此担心！答案已编辑。