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

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 <9 attachEvent而不是addEventListener,并且可能为那些既不支持也不支持的旧浏览器提供一些东西.