javascript - 为什么内联事件处理程序属性在现代语义 HTML 中是个坏主意？

Question

内联事件处理程序是否被认为是一种不好的做法？

例如：<button onclick=someFunction()>Click me!</button>

如果是这样，使用内联事件处理程序的缺点是什么？

Answer 1

这是个坏主意，因为...

1. 最佳实践建议明确区分内容、风格和脚本。使用内联 JavaScript（或 CSS）混淆 HTML 与此不一致。

2. 您只能使用on*-style events 绑定每种类型的一个事件，例如，您不能有两个onclick事件处理程序。

3. 如果内联指定了事件，则将 JS 指定为字符串（属性值始终为字符串）并在事件触发时进行评估。评价是邪恶的。

4. 您必须引用命名函数。这并不总是理想的（事件处理程序通常采用匿名函数）并且对需要全局访问的函数有影响

5. 您的内容安全策略 (CSP) 必须（不明智地）扩展以允许评估内联 JavaScript。

简而言之，通过专用addEventListenerAPI 或通过 jQuery 或其他方式集中处理事件。

[2021年编辑]

如今，响应式框架在一定程度上扭转了这一趋势。反应式框架中的事件通常被指定为属性，例如在 Vue 中：

<p v-on:click=foo>Hello</p>

...其中foo是当前组件的数据对象的方法。

Answer 2

除了在接受的答案中表达的语义和其他意见外，所有内联脚本都被视为漏洞和高安全风险。任何希望在现代浏览器上运行的网站都应该通过元属性或标头设置“内容安全策略”（CSP）属性。

这样做与所有内联脚本和样式不兼容，除非明确允许它们作为排除项。虽然 CSP 的目标主要是防止持久的跨站点脚本 (xss) 威胁，其中内联脚本和样式是 xss 的向量，但它不是当前浏览器中的默认行为，但将来可能会改变。

Answer 3

基于@Mitya 的回答。

在大多数现代 JS 库React、Vue等中。内联事件处理程序被认为是惯用的，但@Mitya 提到的大部分限制都消失了。作为案例研究，我们将查看Vuejs并将其与上面列出的点进行比较：

1. 你可以有多个事件处理程序，看这里
2. 事件值（处理程序）例如onclick不是纯字符串，而是 js 表达式看这里
3. 全局范围问题根本不存在（因为您的代码将被翻译成小型化，被webpack或其他工具重新打包）。

在我自己看来，内联事件处理程序主要增强了可读性，但意见可能会有所不同。