3

由于标题可能有点模糊或不清楚，我将首先解释我的两种方法的含义。在我的 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()"- 的静态方法，并将所有复杂的逻辑放入这个函数中，尽管这可能是我从旧时代（多年前）遗留在代码中的东西。

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

4

3 回答 3

6

您应该将结构 (HTML)、样式 (CSS) 和行为 (JS) 分开。

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

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

于 2012-04-13T10:11:04.280 回答
2

静止的：

  • 将逻辑与内容混合
  • 仅支持旧的（未正式指定）“DOM0”事件模型
  • 不允许将多个处理程序绑定到一个事件 - 您应该使用 DOM2 addEventListener()，而不是.onXXX()
  • 由于引号混合使语法复杂化 - 您可能必须转义引号以避免与onXXX属性中的引号发生冲突。
于 2012-04-13T10:11:12.747 回答
1

我的做法是遵循最小意外规则。

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

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

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

于 2012-04-13T11:43:29.317 回答