Javascript 切换tabbar中的选项卡时，全局变量中的Document.getElementById停止工作

当我通过“做”来学习时，我发现自己正冒险进入一个未知的领域，使用document.getElementById和addEventListener函数。我将这些功能用于一个小图像（按钮），根据用户采取的各种步骤，该图像将具有以下状态：a）禁用、b）启用、c）鼠标悬停、d）鼠标悬停、e）交换图像和f）各种光标样式

昨天我花了几个小时阅读了stackoverflow和mdnweb文档，以了解所有部分是如何协同工作的。然后我构建了代码，它工作得非常完美。这是个好消息。坏消息是，今天早上我碰巧在一个选项卡栏上单击了一个选项卡（该选项卡存在于同一页面上），当我返回到原始选项卡时，所有事件侦听器都已删除，我不明白为什么。通过选择“document”作为getElementById的主要目标，我认为我是安全的，因为只要我在“document”中，事件侦听器和全局变量就会处于活动状态。有人能帮我理解我遗漏了什么吗？以下是我采取的各种步骤：

我首先声明全局变量

window.elem_populate = 0;

然后在window.onload中，我对变量应用一个值。顺便说一句，我使用window.onload是因为没有及时创建目标的ID，并且抛出了一个“undefined”错误

然后，根据用户的输入，我使用以下方法：

elem_populate.addEventListener('mouseover', hover_populate_on);
elem_populate.addEventListener('mouseout', hover_populate_off);

下面是几个被调用函数的示例：

hover_populate_off = function hover_populate_off() {
    elem_populate.style.opacity = "1.0";
    elem_populate.style.cursor = "not-allowed";
}

hover_populate_on = function hover_populate_on() {
    elem_populate.style.opacity = "0.8";
    elem_populate.style.cursor = "pointer";
}

---

实际目标（“工具栏_填充”）位于两个选项卡选项卡栏的选项卡1上。如果我不离开账单，一切都会神奇地运转。但是，当我移动到选项卡2，然后返回到选项卡1时，所有引用都将丢失，功能停止。因为所有的东西都在同一份文件上，我不明白为什么我会丢失参考资料。任何帮助或指导都将不胜感激。提前感谢…

如果引用丢失，则意味着该元素将在某个时候从文档中删除。但是，如果我们不知道您如何管理您的页面，我们将无法帮助您tabs@blex我懂了。所以，它都在同一个“文档”中这一事实并不一定意味着当我在文档中移动时，所有元素都保持不变？为什么不直接使用CSS呢？这里真的不需要JavaScript是的，这完全取决于如何显示/隐藏选项卡内容。如果在某个时候您执行了

container.innerHTML='…'，对该容器内元素的任何引用都将丢失。如果您仅使用CSS显示/隐藏内容，那么它将保持不变
#toolbar_populate{opacity:0.8；transition:opacity 0.3s；}#toolbar_populate:hover{opacity:1；}
hover_populate_off = function hover_populate_off() {
    elem_populate.style.opacity = "1.0";
    elem_populate.style.cursor = "not-allowed";
}

hover_populate_on = function hover_populate_on() {
    elem_populate.style.opacity = "0.8";
    elem_populate.style.cursor = "pointer";
}