javascript - onclick 事件不触发 javascript

Question

编辑#2:

做了一个 JS Fiddle... http://jsfiddle.net/N2p6G/ (我硬编码了一些我确定可以正常工作的东西，但问题仍然存在)

原文:

所以，我已经写了数万行 javascript，并使用了数百次看起来像这样的代码，但我不明白这是怎么回事。

blacklistitembutton.onclick = function() {
  console.log("clicked.");
}

上面的代码似乎没有工作......我不明白为什么

事实上，我之前在同一个文件中使用了相同的方法......而且效果很好!

settings.onclick = function() {
  settings_popup.toggle();
}

编辑:

这可能与它在 for 循环中执行有关吗？这是代码...

var blacklistButton = document.createElement('input');
blacklistButton.type = 'button';
blacklistButton.value = "Add Current Site to Blacklist";
blacklistButton.onclick = function() {
  console.log('blacklistButton clicked');
}

for (var i=0;i<blacklist.length;i++) {
  var blacklistitembutton = document.createElement('div');
  blacklistitembutton.type = 'button';
  blacklistitembutton.blacklistValue = blacklist[i];
  blacklistitembutton.value = "X";
  blacklistitembutton.onclick = function() {
    console.log("clicked.");
  }
}

然后blacklistButton和所有的blacklistitembuttons都通过element.appendChild放入文档中(它们都成功显示了!)

blacklistButton onclick 触发得很好，而 blacklistitembutton onclick 却没有。

Answer 1

document.addEventListener('click', function(){
    console.log('clicked');
}, false);

编辑:

这是在 fiddle 中重写的代码:http://jsfiddle.net/N2p6G/1/

您的代码中有很多地方让我担心。希望您能从我的重写中看到有更好的方法来处理某些事情。

1) 我不确定您为什么一开始就使用 document.write() 。这没有什么意义。

2) 您对 DOM 的修改方式太多了。您在代码中创建的一些 DOM 元素作为 html 中的目标位置更好地服务。只有动态创建的输入按钮元素需要在 javascript 中完成。请记住，应尽可能少地修改 DOM。

3) 不要使用 onclick、onsubmit、onhover 等语法分配事件。事件应该只使用 addEventListener 绑定(bind)到 DOM 元素。以正确的方式执行此操作的另一个好处是，如果需要，您可以将多个相同类型的事件分配给同一元素。此外，对于一些我没有包含的额外状态代码，您可以在以后需要时有选择地删除特定事件。

4) 几年前有一场关于使用 innerHTML 和字符串模板是否比使用 DOM 创建方法更快/更好的争论。有一段时间，最好的解决方案是使用 documentFragments 和这两种方法的组合。现在，它真的不再重要了，因为所有的浏览器都非常快，所以为了简单起见，最好只使用 innerHTML。

这也回到了“不要过多接触 DOM”的规则。如果您查看我的代码，您会发现我将最终的 html 简单地组装为一个元素数组，这些元素最后连接为一个字符串。然后使用单个 innerHTML 语句将其呈现给 DOM。我只接触 DOM 一次，而不是多次。

5) 最后一点再次进入事件。在代码的开头和结尾，您可以看到我在何处以及如何为 DOM 元素添加事件。事实上，开头的 addEventListener 可以移到末尾以将所有事件声明组合在一起，但这并不重要。我将其留在顶部以帮助您更好地了解发生了什么。

希望这对您有所帮助。