Question

在JSLint上使用“Good Parts”默认值，不允许使用HTML事件处理程序（例如onclick）。

这背后的逻辑是什么？他们应该避免哪些不好的事情？

Answer 1

在JSLint上使用“Good Parts”默认值，不允许使用HTML事件处理程序（例如onclick）。

标记了实际标记中事件处理程序的使用，是：

<div onclick="...">

这通常被认为是不好的做法。将脚本行为混合到标记中很难阅读和管理;在实际脚本中更容易将所有脚本保存在一起，因此您无需深入研究标记以查找正在调用的脚本挂钩。

此外，通过将脚本代码放在需要HTML编码的上下文中，您将添加额外的一层逃避混淆。你最终会说出令人讨厌的东西：

<div onclick="if (a&lt;b) this.innerHTML= &quot;I said \&quot;Hello &amp;amp; welcome!\&quot;&quot;">

自然很难让这种编码正确，如果你正在处理动态值，不正确的编码组合会给你留下脚本注入（XSS）问题。

独立脚本中的相同内容：

somediv.onclick= function() {
    if (a<b)
        this.innerHTML= "I said \"Hello &amp; welcome!\"";
};

是一个逃避级别更清晰。

JSLint并没有抱怨这种用法。虽然有些人认为使用听众会更好，因为你可以为一个事件添加多个听众，这更像是一个重量级的解决方案，因为你必须解决IE＆lt; 9 attachEvent而不是addEventListener的问题。为那些既不支持它们的旧浏览器提供一些东西。

Answer 2

逻辑最好用短语"separation of concerns"来概括，这是软件工程的一个共同原则。在这种情况下，在HTML中使用内联事件处理程序会将行为问题（事件处理程序）引入您的表示关注点（HTML）。对于一些古老的建议，请参阅Unobtrusive DHTML, and the power of unordered lists。其他好的来源是A List Apart，当然还有Wikipedia。

Answer 3

我认为原因是：

使用默认事件处理程序时，只能有一个注册函数。

可能已经定义了一个（通过onclick属性），当您在JS代码中重新定义它时，原始处理程序会丢失，可能会破坏功能。如果你采用“添加事件处理程序”路径（例如通过jQuery的bind()），就不会发生这种情况。

对于您完全控制的小型网络应用，这可能没问题。如果您编写的JS代码是某种类型的插件/库，则此行为将变得不可接受。

Answer 4

他们没有错。但是，您只能通过该方法附加一个侦听器（而不是使用允许多个侦听器的addEventListener / attachEvent）。但是，对于简单的应用程序而言，这可能不是问题。

另一个问题是，如果您在HTML中使用事件处理程序属性，则会将内容与行为混合在一起。这并不理想，不引人注目的JavaScript人群会嘲笑你这样做，但同样，实现这种分离不是唯一的考虑因素，对于一个非常简单的应用程序，我赞成这种方法的简单性。还有一个事件处理程序属性的功能，没有其他机制，这是在呈现元素后立即可用的JavaScript行为，而不是文档加载后的时间（否则您将分配事件处理程序的典型时间）。 / p>

为什么JSLint限制使用HTML事件处理程序？

4 个答案: