JQuery：为什么不引人注目的JavaScript/文档就绪函数而不是OnClick事件？

我刚刚开始研究JQuery。目前我的web应用程序中没有任何AJAX

HTML中现有的JavaScript如下所示：

<form ...>
<p>Find what? <input ...></p>
<div class="ButtonArray">
  <a href="AddRecord.ASP&amp;Action=ADD">ADD</a>
  <a href="#" onClick="return MyFormSubmit();">FIND</a>
</div>
</form>

在我理解JQuery的“新手”阶段，我不明白为什么要这样做

我的旧方法识别对象附近的方法。在用户按下按钮之前可能存在JS未加载的风险（有吗？JS的加载就在页面顶部）

JQuery Document Ready方法在加载文档之前不会被激活（我假设这可以保证JS都存在并且准备好运行？），但它将代码移动到HTML文件的一个单独部分——因此当我在HTML源代码中看到MyButtonArray DIV时，我不清楚哪些对象有方法，哪些没有

你能帮助我了解我的选择是什么，以及我应该注意哪些好处/问题吗

编辑：我认为DOM操作（例如，当单击任何具有“LightBoxThumb”类的缩略图时，都会出现一个LightBox）将使用不引人注目的Javascript

然而，我努力说服自己，一个按钮，有一个具体的行动应该有它的方法应用在这种方式。（除了对“其他地方”的某个函数调用之外，我当然不会在按钮上添加任何代码，但在我看来，这是我了解该按钮功能的最佳线索，而不引人注目的Javascript层可能会使这一点更难确定。）

Edit2-接受答案

我已经接受了Russ Cams的回答。它以一种不引人注目的方式描述Javascript，这有助于我更好地理解如何以及何时使用它

目前（当我有更多的经验时，可能会改变！）我将坚持使用OnClick事件对一个对象执行一个单一的、不改变的操作，因为我觉得这样会更容易调试，并在出现问题时进行诊断。对于允许单击标题列进行排序（以及该类型的情况）的表上的Zebrastrips，我可以看到不引人注目的Javascript方法的好处

Russ的最后评论特别有用，在这里重复：

“@Kristen-你是对的，就像很多人一样 在编程主题中，还有更多 不止一种方法，人们会 坚决支持他们的信仰！如果 我们讨论的是单一方法 对于一个按钮，我完全 了解你来自哪里

如果我们谈论的是很多 JavaScript，具有相同的函数调用 对于多个元素，不同的 函数调用不同的方法， 等等，我想会更 自己很难混在一起 和不引人注目的方法，而且 最好采用一种或几种方法 “其他办法”

---

这样做是为了将UI逻辑与实际的HTML设计分离。

是将JS代码与标记分离的主要驱动程序

• 将功能（“行为层”）与网页的功能分离
  结构/内容和介绍
• 避免传统JavaScript问题的最佳实践 编程（如浏览器） 不一致和缺乏一致性 可扩展性）
• 逐步增强以支持可能不支持的用户代理
  高级JavaScript功能

对于document.ready中的代码，在加载DOM和页面内容之前，它不会执行

从

使用$（document）.ready（），您可以让事件加载或激发，或者在窗口加载之前让它们执行任何操作

你可能想看看，我强烈推荐。您可以在屏幕上进行采样和打印。我认为这样做可以进一步深入了解为什么分离可以很好地发挥作用

最后，看看哪些答案详细说明了如何在DOM节点上找到事件侦听器

编辑：

一些想法可能会说服您为什么不引人注目的JavaScript是一个好主意

假设您有一个函数绑定为在多个元素中的每个元素上引发的同一事件的事件处理程序-

• 找出哪个更容易 元素调用该函数来处理 声明内联时的事件 在每个元素中，或在声明中 在一个地方，在 加价

• 如果要添加到 当 他们中的每一个人都被提起了这个事件？ 是否更容易/更好地添加 事件处理程序内联到每个元素 还是在一个地方更改代码

---

文档准备就绪事件早于文档加载事件。文档就绪在加载DOM后发生，这样所有元素在开始处理它们之前都存在

因此，是的，JS将在呈现文档时准备就绪。关于绑定的另一点是，在执行cetain操作时，将绑定更改为元素非常有用

---

不过，如果愿意，您仍然可以在元素上声明操作。

随着时间的推移，我想您已经习惯了jQuery语法并阅读了：

class=“MyFormSubmit”变得像阅读onClick=“return MyFormSubmit（）”一样信息丰富

这种力量真正开始发挥作用的地方（除了其他海报提到的所有好处外）是，您可以通过与网页上的其他操作相关联的选择器轻松地更改onClick绑定，这种方式一开始似乎从未出现过

---

我问自己的一个问题是，如果我计划广泛使用一个框架或库，然后用“更原生”的语言编写代码，那么我计划使用任何新工具的深度有多深“编码风格将变得更加自然，了解该工具的其他开发人员将发现代码更加简洁易懂。

谢谢，我可以看到，但我的HTML上只有一个调用“MyFormSubmit（）”。我的实际c

$(function() {
  $(".MySearchButtonClass").click(function() {
    // validate and process form here
  });
});