通过属性附加事件处理程序有什么问题吗?

Question

这听起来有点像初学者的问题：可以通过addEventListener attachEvent或$().event(handler)附加事件处理程序

或者，您可以通过单击分配属性来执行此操作

<a onclick="doSomething()"/>

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

将

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

Answer 1

为什么内联绑定事件是不好的

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

所以

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

延伸阅读

为什么内联CSS和JavaScript代码是一件坏事

不显眼的JavaScript

网页开发的三层

进度提升

Answer 2

这

被称为Unobhisive JavaScript。Unobusive JavaScript 的目标是：

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

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

Answer 3

简单来说，这样做并没有什么"错"。从语义上讲，将标记、样式和脚本分开是一种很好的做法。因此，内联样式不是"错误"但不是一种好的做法的原因相同。

Answer 4

最后，

它归结为关注点的分离。高级模型的大多数可能的事情也可以使用内联事件属性来完成 - 它们只会变得更加复杂：

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

如果不使用内联事件，它简化了代码编码/维护，允许更好的程序设计（并促进渐进式增强），并减小文件大小。

具有 DOM 属性onEvent的传统模型确实会处理最后两点。在同一元素上分配多个侦听器（相同类型）是可能的（即使彼此不认识），但仍然非常麻烦。

具有addEventListener的高级事件绑定提供了更大的灵活性。您不需要照顾其他事件侦听器（除了停止传播），它允许做一件以前不可能的事情：在捕获阶段处理事件。