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

Question

内联事件处理程序是否被视为不良做法？

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

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

Answer 1

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

1. 最佳做法建议明确区分内容、样式和脚本。用内联 JavaScript(或 CSS)混淆 HTML 与此不一致。

2. 您只能将每种类型的一个事件与 on* 样式的事件绑定(bind)，因此您不能有两个 onclick 事件处理程序，例如。

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

4. 内联事件处理程序表示的函数必须是全局的(或至少是全局可访问的)，如今这种情况很少见；代码通常是命名空间的，或者封装在模块中(感谢@Sebastian Simon)。

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

简而言之，通过专用的 addEventListener API 或通过 jQuery 或其他东西集中处理事件。

[2021 编辑]

如今，响应式框架在某种程度上扭转了这一趋势；响应式(Reactive)框架中的事件通常指定为属性，例如在 Vue 中:

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

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

但是，这不是真正的内联事件处理；在@adnanmuttaleb 的回答下查看@colin 的评论。