Javascript HTML元素上的静态与动态事件附件

由于标题可能有点模糊或不清楚，我将首先解释这两种方法的含义。在HTML/JS代码中，我混合了两种将事件附加到HTML元素的方法：（1）我称之为“静态”：

请注意，这不是一个真正的代码，只是一个示例。我也不必使用jquery，使用simple也可以实现同样的效果

document.onload = function() {
    document.getElementById('xyz').onclick = function() { do_something; }
}

通常，如果逻辑非常简单（例如，单击另一个元素时启用/禁用元素），我会使用静态方法。如果逻辑更复杂，我会使用动态逻辑。当然，我也可以将静态方法与

onclick=“function\u call（）”

-结合使用，并将所有复杂的逻辑放入这个函数中，尽管这可能是我从遗留时代（几年前）遗留在代码中的东西

现在，我遇到过一些人，他们会对其中一种方法发誓，并嘲笑任何使用另一种方法的人，声称另一种方法是错误的/难以阅读/速度较慢/添加您自己的解释。然而，我还没有找到任何真正好的理由总是坚持使用一种方法，并不断地把它们混在一起。我是否遗漏了一些东西，或者真的没有很好的理由坚持使用一种方法？

你应该将结构（HTML）、样式（CSS）和行为（JS）分开

事件是页面的行为——在JS中执行

不要将它们放在任何其他地方，不要放在HTML或CSS中（如果可能的话）。

静态：

• 将逻辑与内容混为一谈
• 仅支持旧的（未正式指定的）“DOM0”事件模型
• 不允许将多个处理程序绑定到一个事件-您应该使用DOM2

  addEventListener（）

  ，而不是

  .onXXX（）

• 由于引号混合，使语法复杂化-您可能必须转义引号以避免与

  onXXX

  属性中的引号冲突

---

我的做法是遵循最不出人意料的原则

如果我的页面是99%的HTML，只有1或2行Javascript，那么我会使用内联事件

，以最大限度地减少页面中由于addEventListener baggage而产生的绒毛

如果我的页面太复杂，元素太多，如果行为分离会导致大块

getElementById

或

$（'.tree'）

部分，这实际上会抑制可读性（因此增加意外级别），那么我也会使用内联事件

---

否则，我会使用预期的结构和行为分离规则。

你难道不喜欢那些在没有任何原因说明的情况下否决投票的人吗？值得一提的是，事件处理程序属性的优点是，元素一呈现就可以工作，而不必等到事件处理程序被附加。

<input name="abc" class="def" id="xyz" />

$(document).ready(function() {
    $('#xyz').click(function() { do_something; })
});

document.onload = function() {
    document.getElementById('xyz').onclick = function() { do_something; }
}