JQuery:为什么不引人注目的JavaScript /文档就绪功能而不是OnClick事件？

Question

我刚刚开始关注JQuery.我目前在我的网络应用程序中没有任何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>

这将显示[添加]和[查找]的按钮.对于Find,有必要提交表单,我使用MyFormSubmit()验证数据,为页面添加视觉效果,然后POST数据.

我可以为Find按钮添加一个CLASS或ID,在JQuery中我可以编写如下内容:

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

在我与JQuery理解的"新手"阶段,我不明白为什么我会这样做

我的旧方法识别对象附近的方法.在用户按下按钮之前可能存在JS未加载的风险(在那里？JS的LOAD位于页面顶部).

在加载文档之前,JQuery Document Ready方法不会被激活(我假设JS已经存在并准备好运行了吗？),但它将代码移动到我的HTML文件的一个单独部分 - 所以当我在HTML源代码中看到了MyButtonArray DIV,对我来说哪些对象有方法,哪些对象没有方法不明显.

能否帮助我了解我的选择以及我应该注意的好处/问题？

编辑:我觉得DOM操作 - 比如点击任何带有类"LightBoxThumb"的缩略图时可以出现的LightBox - 会使用Unobtrusive Javascript.

但是,我正在努力说服自己,具有特定操作的按钮应该以这种方式应用其方法.(我当然不会在按钮上放任何代码而不是单个函数调用"其他地方"的东西,但在我看来,这是我最好的线索,关于那个按钮做什么,而不显眼的Javascript层可能会更难确定.)

Edit2 - 接受的答案

我已经接受了Russ Cams的回答.它以一种对我有所帮助的方式描述了Unobtrusive Javascript,以便更多地了解应该如何以及何时应该使用它.

目前(当我有更多经验时可能会改变!)我将坚持使用OnClick事件对一个对象进行单个,不变的动作,因为我觉得我更容易调试 - 并且如果出现问题则进行诊断.对于允许单击标题列进行排序(以及该类型的情况)的表上的ZebraStripes,我可以看到Unobtrusive Javascript方法的好处

Russ的最终评论特别有用,在此重复:

"@Kristen - 你是对的,就像许多编程主题一样,有不止一种方法,人们会强烈支持他们的信念!如果我们谈论单一按钮的单一方法,我完全理解你的位置来自......

如果我们讨论的是大量的JavaScript,同一个函数调用多个元素,不同的函数调用不同的方法,等等.我认为自己混合内联和不显眼的方法会更加困难,而且它会是更好地采用一种或另一种方法"

Answer 1

不引人注目的JavaScript是将JS代码与标记分离的主要驱动因素

• 从网页的
  结构/内容和表示中分离功能("行为层")
• 避免传统JavaScript编程问题的最佳实践(例如浏览器不一致和缺乏可伸缩性)
• 逐步增强,以支持可能不支持
  高级JavaScript功能的用户代理

使用document.ready中的代码,它将在DOM加载之前和加载页面内容之前执行

从学习jQuery

使用$(document).ready(),您可以在窗口加载之前加载或触发事件或者您希望它们执行的操作.

你可能想看一下jQuery in Action,我强烈推荐它.您可以品尝到第1和第5章的书的首页.我认为这样做可以进一步深入了解为什么分离能够很好地发挥作用.

最后,看一下这个问题的答案,详细说明如何在DOM节点上找到事件监听器.

编辑:

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

想象一下,你有一个函数绑定为一个事件处理程序,用于在每个元素上引发的同一事件 -

• 当声明在每个元素中内联,或者声明是在标记之外的一个地方时,是否更容易找出哪个元素调用该函数来处理事件？

• 如果要在每个函数上引发事件时添加到调用该函数的元素,该怎么办？将事件处理程序内联添加到每个元素或在一个地方更改代码会更容易/更好吗？