2

假设我的<select>HTML 页面上有一个元素，并且我想在选择更改时运行一些 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 的集成是否更好？代码到事件的后期绑定是否会对页面的行为产生影响？

你选择哪个，为什么？

4

3 回答 3

1

好吧，阅读一下

不显眼的 JavaScript

于 2010-05-05T12:12:39.877 回答
1

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

于 2010-05-05T12:21:02.990 回答
0

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

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

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

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

于 2010-05-05T12:09:39.577 回答