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

Question

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

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

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

Answer 1

这是一个坏主意,因为......

1)长期以来,人们明确强调内容,风格和剧本之间的明确区分.使用JS混淆HTML并不符合这一点.

2)更重要的是,你对事件的控制要少得多.特别:

简而言之,通过专用addEventListenerAPI或jQuery等集中处理事件.

*"曾经有一段时间,在实际源代码中内联元素的内容存储的想法是非语义的"*.我认为这不是真的.HTML源代码是存储网页数据的自然场所.HTML定义结构并保存数据. (3认同)
`v-on:click` 并不是真正的属性。这是一个指令，在幕后它将使用 `addEventListener` https://vuejs.org/v2/guide/events.html#Listening-to-Events (3认同)
关于第 4 点：当前的最佳实践包括使用 ECMAScript 模块。模块有自己的模块作用域，但不是全局作用域。由于“on*”属性依赖于全局范围，因此您必须将函数设置为全局属性，这违背了模块的部分目的，特别是封装的好处。 (2认同)

Answer 2

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

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

冒着重复自己的风险，您指出 onclick 是内联事件处理程序是语义，或者是没有区别的区别。“处理程序”是脚本，因此是内联脚本。“投票最高”只是由于偏见而最高，所以对开发人员有极端偏见，而不是安全专业人员。如果有更多像我这样的人参与投票，那么有安全意识的人就会有更均匀的代表。拥有较少的票数并不意味着答案是错误的，除此之外，只允许 1 个接受/正确的答案，但你没有经验，无法考虑现实中的问题有 1 个正确的答案。 (2认同)