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

Question

由于标题可能有点含糊或不清楚，我先解释一下这两种方法的意思。在我的 HTML/JS 代码中，我混合了两种将事件附加到 html 元素的方法：(1) 我所说的“静态”：

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

和（2）我所说的“动态”：

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

与

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

请注意，这不是真正的代码，只是作为示例呈现。我也不必使用jquery，用简单的方法也可以实现同样的效果

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

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

onclick="function_call()"

的静态方法 - 并将所有复杂的逻辑放入这个函数中，尽管这是我可能在遗留时代（几年前）的代码中留下的东西。

现在，我遇到过一些人，他们会发誓使用其中一种方法，并嘲笑任何使用另一种方法的人，声称另一种方法是错误的/难以阅读/速度较慢/添加你自己的解释。然而，我还没有找到任何真正好的理由来始终坚持一种方法并不断混合使用这些方法。我错过了什么还是真的没有充分的理由坚持使用一种方法？

Answer 1

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

事件是页面的行为 - 在 JS 中完成。

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

Answer 2

静态：

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

  addEventListener()

  ，而不是

  .onXXX()

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

  onXXX

  属性中的引号发生冲突。

Answer 3

我的做法是遵循最少惊喜规则。

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

<div onclick="">

来最大程度地减少由于 addEventListener 包袱而导致的页面中的无用信息。

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

getElementById

或

$('.tree')

部分，这实际上会抑制可重读性（因此增加惊喜程度），那么我也会使用内联事件。如何以及为何

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