我在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 – You’re right,like a lot@H_403_34@ of programming topics,there is more@H_403_34@ than one approach and people will@H_403_34@ vehemently stand by their beliefs! If@H_403_34@ we’re talking about a single method@H_403_34@ for a single button,I totally@H_403_34@ understand where you’re coming from…

If we’re talking about lots of@H_403_34@ JavaScript,with same function calls@H_403_34@ for more than one element,different@H_403_34@ function calls for different methods,@H_403_34@ etc. I think that it would be more@H_403_34@ difficult for oneself to mix inline@H_403_34@ and unobtrusive approaches,and it@H_403_34@ would be better to adopt one or the@H_403_34@ other approach”