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

静态：

• 将逻辑与内容混合
• 仅支持旧的（并且未正式指定）＆＃34; DOM0＆＃34;事件模型
• 不允许将多个处理程序绑定到某个事件 - 您应该使用DOM2 addEventListener()，而不是.onXXX()
由于引用混合，
• 使语法复杂化 - 您可能必须转义引号以避免与onXXX属性中的引号发生冲突。

Answer 3

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

如果我的页面是99％的HTML并且只有1或2行Javascript，那么我使用内联事件<div onclick="">来最小化由于addEventListener行李导致的页面中的绒毛数量。

如果我的网页过于复杂且元素太多，并且如果行为分离会导致大块getElementById或$('.tree')部分，这实际上会抑制可读性（因此会增加意外级别），那么我也会使用内联活动。

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