通过属性附加事件处理程序有什么不对吗？

Question

这听起来像是一个初学者的问题： 您可以通过addEventListener attachEvent或$().event(handler)

附加事件处理程序

或者您可以通过分配属性onclick

来实现

<a onclick="doSomething()"/>

所以我很想知道使用属性方法是否有什么特别的错误。这听起来不对，但我不知道它会如何阻碍任何事情。特别是因为它使传递参数变得非常容易

分离问题是不这样做的一个很好的理由。 我有一个关于初学者的jQuery研讨会，所以我正在寻找其他一些问题，所以我可以给人们。 “因为我这么说”并不是我的风格。我知道这听起来像是一个开放式的问题，但我很确定没有明确的理由不这样做。

Answer 1

为什么绑定事件内联不好

• 当您想要进行一些更改时，很难维护代码
• 如果代码很大（在评论部分解释的原因）
，则无法缓存您的代码
• 您无法重复使用您的事件处理程序
• 你混淆了content layer和behaviour layer，这使你的代码缺乏逻辑
• 将使用eval命名空间中的global执行事件处理程序，这是JavaScript中必须避免的两件事
• 很难支持no-javascript情况，让progress enhancement很难

<强>因此

始终在外部添加.js文件和.css文件，并使用框架绑定事件以使代码跨浏览器工作。

进一步阅读

Why Inline CSS And JavaScript Code Is Such A Bad Thing

Unobstrusive JavaScript

The Three Layer in Webpage Development

Progress Enhancement

Answer 2

这称为Unobtrusive JavaScript。 Unobtrusive JavaScript的目标是：

1. 从网页的结构/内容和呈现中分离功能（“行为层”）
2. 避免传统JavaScript编程问题的最佳实践（例如浏览器不一致和缺乏可伸缩性）
3. 支持可能不支持高级JavaScript功能的用户代理的渐进增强

基本上，如果用户代理不支持JavaScript，它永远不应该知道它在那里。

Answer 3

用简单的语言解释，没有什么是错的＆＃39;这样做。分离标记，样式和脚本是语义上的好习惯。因此，内联样式不是“错误”的原因相同。但不是一个好习惯。

Answer 4

最后归结为separation of concerns。使用advanced model的所有内容都可以使用inline event attributes完成 - 它们只会变得更复杂：

• 您可以绑定多个侦听器（onclick="doA(); doB()"），但您需要在之前了解所有这些侦听器
• 当动态生成此类属性时（例如，在HTML字符串中），您必须使用代码字符串
• 要调用外部函数，它们必须位于全局范围内

如果您不使用内联事件，它可以简化编码/维护代码，允许更好的程序设计（并促进progressive enhancement），并减少文件大小。

具有onEvent DOM属性的traditional model确实处理了最后两点。可以在同一个元素上分配多个（相同类型）的侦听器（即使不相互了解），但仍然非常麻烦。

与addEventListener绑定的高级事件允许更大的灵活性。您不需要处理其他事件侦听器（除了停止传播），并且它允许以前无法做到的事情：在捕获阶段处理事件。