内联事件处理程序是否被视为不良做法?
例如:<button onclick=someFunction()>Click me!</button>
如果是这样,使用内联事件处理程序的缺点是什么?
最佳答案
这是个坏主意,因为...
最佳做法建议明确区分内容、样式和脚本。用内联 JavaScript(或 CSS)混淆 HTML 与此不一致。
您只能将每种类型的一个事件与
on*
样式的事件绑定(bind),因此您不能有两个onclick
事件处理程序,例如。如果内联指定事件,则 JS 被指定为字符串(属性值始终为字符串)并在事件触发时进行评估。评价是邪恶的。
内联事件处理程序表示的函数必须是全局的(或至少是全局可访问的),如今这种情况很少见;代码通常是命名空间的,或者封装在模块中(感谢@Sebastian Simon)。
您的内容安全策略 (CSP) 必须(不明智地)扩展以允许评估的内联 JavaScript。
简而言之,通过专用的 addEventListener
API 或通过 jQuery 或其他东西集中处理事件。
[2021 编辑]
如今,响应式框架在某种程度上扭转了这一趋势;响应式(Reactive)框架中的事件通常指定为属性,例如在 Vue 中:
<p v-on:click='foo'>Hello</p>
...其中 foo
是当前组件的数据对象的方法。
但是,这不是真正的内联事件处理;在@adnanmuttaleb 的回答下查看@colin 的评论。
关于javascript - 为什么内联事件处理程序属性在现代语义 HTML 中不是一个好主意?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11737873/