如何最好地将代码与 jQuery 中的事件相关联？答案

【问题标题】：How best to associate code with events in jQuery?如何最好地将代码与 jQuery 中的事件相关联？
【发布时间】：2010-05-05 12:04:22
【问题描述】：

假设我的 HTML 页面上有一个 <select> 元素，并且我想在选择更改时运行一些 Javascript。我正在使用 jQuery。我有两种方法可以将代码与元素关联起来。

方法一：jQuery .change()

<select id='the_select'>
<option value='opt1'>One</option>
<option value='opt2'>Two</option>
</select>

<script>
$('#the_select').change(function() {
  alert('Changed!');
});
</script>

方法二：onChange属性

<select id='the_select' onchange='selectChanged();'>
<option value='opt1'>One</option>
<option value='opt2'>Two</option>
</select>

<script>
function selectChanged() {
  alert('Changed!');
}
</script>

我理解这里不同的模块化：例如，方法 1 将代码引用保留在 HTML 之外，但方法 2 不需要在代码中提及 HTML id。

我不明白的是：这两者之间是否存在操作差异，让我更喜欢其中一个？例如，是否存在其中一个工作而另一个不工作的边缘案例浏览器？与 jQuery 的集成是否更好？代码到事件的后期绑定是否会对页面的行为产生影响？

你选择哪个，为什么？

【问题讨论】：

标签： jquery event-handling onchange

【解决方案1】：

好吧，阅读一下

unobtrusive javascript

【讨论】：

【解决方案2】：

方法 1 的一个优点是绑定事件不会破坏任何其他可能已经将一些代码绑定到元素的 JavaScript。使用方法 2，如果另一个代码已经绑定了 change 事件，您将不得不更改您的 HTML 代码。

【讨论】：

【解决方案3】：

我想如果你不硬编码它会更容易管理、绑定和取消绑定。但是硬编码的非常适合在谷歌地图中进行活动。由于很难知道在页面加载的哪个阶段可以使用其中的元素，因此从外部脚本绑定偶尔会导致问题。

但我的意思是从关注点分离的角度来看，标记中没有事件逻辑当然是最好的

另一件事是关于用户连接。有时将事件硬编码会增加与速度相关的问题，即用户单击调用未加载函数的内容。

同样从屏幕阅读器或任何没有具有事件处理属性的 JS 的设备的角度来看，基本上你是在用无意义的方式填充页面，这会增加页面大小。

【讨论】：