Question

我有一个简单的选项数组，基本上决定了在任何时候都可以通过Web应用程序看到哪些按钮。

因此对于家庭来说，阵列看起来像：第1步

if (view === "home") {
  visibleCommands = [];
  visibleCommands[0] = "contact";
  visibleCommands[1] = "about";
}
setVisibility(visibleCommands);

然后我遍历数组：第2步

setVisibility(visibleCommands) {
  var i;
  for (i in visibleCommands) {
    document.getElementById(visibleCommands[i].style.display = "inline";
  }
  addEvents(visibleCommands);
}

最后，对于可见命令，我想添加单独的事件监听器：步骤3

addEvents(visibleCommands) {
  var i;
  for (i in visibleCommands) {
    document.getElementById(visibleCommands[i]).addEventListener("click", visibleCommands[i], false);  
  }
}

但是，如果我将此行更改为：

，该事件似乎并未连接到视图中的元素

document.getElementById(visibleCommands[i]).addEventListener("click", contact, false);

然后它正确地连接到元素并调用contact（）函数。

我做错了什么？

Answer 1

您的代码：

document.getElementById(visibleCommands[i]).addEventListener("click", visibleCommands[i], false);

visibleCommands[i]是 id ：

document.getElementById(visibleCommands[i])

visibleCommands[i]是点击回调：

.addEventListener("click", visibleCommands[i], false);

怎么可能？

"contact"和contact是两个不同的东西。第一个是具有contact值的字符串，而第二个是对函数的引用

另一件事：

document.getElementById(visibleCommands[i].style.display = "inline";

)函数调用中缺少getElementById：

document.getElementById(visibleCommands[i]).style.display = "inline";

Answer 2

你在哪里绑定处理程序？

document.getElementById(visibleCommands[i]).addEventListener("click", visibleCommands[i], false);

上一行中的第二个参数是一个不正确的字符串。它应该是处理函数。

尝试以下内容，

document.getElementById(visibleCommands[i]).addEventListener("click", function () {
   alert('Clicked');
}, false);

您可以阅读addEventListener

还可以使用.push正确的方法将元素添加到数组中。见下文，

visibleCommands.push("contact");
visibleCommands.push("about");

动态设置事件监听器应调用的函数

2 个答案: