为什么将“onClick”设置为事件处理程序不被识别为语法错误？答案

【问题标题】：Why is setting 'onClick' as event handler not recognized as syntax error?为什么将“onClick”设置为事件处理程序不被识别为语法错误？
【发布时间】：2014-08-02 16:28:50
【问题描述】：

我的 JavaScript 代码是：

var headline = document.getElementById("mainHeading");
headline.onClick = function() {
    headline.innerHTML = "You clicked the headline.";
};

但是当我点击标题时没有任何反应。当我使用onclick 而不是onClick（没有大写字母C）时，它才有效。

问题是当我使用 Chrome DevTools 和 Firebug 进行调试时，它们不会将 onClick 显示为语法错误。

谁能告诉我如何调试它？

【问题讨论】：

“谁能告诉我如何调试它？” 遗憾的是，使用错误的属性名称并不那么容易调试。但是，该函数没有被调用的事实已经告诉您您没有正确绑定事件处理程序。然后你应该看看你是如何绑定事件处理程序的，然后你会注意到你使用了onClick 而不是onclick。并非所有东西都可以调试，有些东西你必须真正学习。 developer.mozilla.org/en-US/docs/Web/Guide/Events/…

标签： javascript javascript-debugger

【解决方案1】：

事件是onclick（全小写）。 JavaScript 区分大小写，因此您必须匹配大小写。当您设置 onClick 时，您将元素上的自定义属性设置为您指定的函数。该元素存储了该值，但没有任何东西可以访问该属性。这是 JavaScript 的一个特性，您可以在任何对象上设置任意属性，因此调试器中没有任何内容可以让您遗憾地捕捉到这一点。

【讨论】：

因为设置 onClick 不是语法错误，您可以通过检查代码是否执行来捕获此错误，即可见或通过在 headline.innerHTML ... 行设置断点并单击#mainHeading 元素并查看断点未命中。

【解决方案2】：

他们不会将onClick 显示为语法错误，因为它不是。

您正在做的是在对象headline 上设置一个名为onClick 的变量作为函数。一切都很好。这里没有错误。

它不会被调用，因为当点击发生时“浏览器”会调用onclick。

如果你自己不打电话给onClick，那永远也不会。

使用onclick。

【讨论】：