2

HTML ページに<select>要素があり、選択が変更されたときに Javascript を実行したいとします。私はjQueryを使用しています。コードを要素に関連付ける方法は 2 つあります。

方法 1: 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>

方法 2: 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 について言及する必要はありません。

私が理解していないのは、これら2つの間に操作上の違いがあり、どちらかを好むようになるのでしょうか? たとえば、これらの 1 つが機能し、もう 1 つが機能しないエッジケースのブラウザーはありますか? jQuery との統合は、どちらにとっても優れていますか? イベントへのコードの遅延バインディングは、ページの動作に違いをもたらしますか?

あなたはどちらを選びますか、そしてその理由は何ですか?

4

3 に答える 3

1

方法 1 の利点は、イベントをバインドしても、既に要素にコードをバインドしている可能性のある他の JavaScript を中断しないことです。方法 2 では、別のコードが既に change イベントをバインドしている場合、HTML コードを変更する必要があります。

于 2010-05-05T12:21:02.990 に答える
1

さて、読んでみてください

目立たないJavaScript

于 2010-05-05T12:12:39.877 に答える
0

ハードコーディングしないと、管理、バインド、およびバインド解除が簡単になると思います。ただし、ハードコードされたものは、たとえば Google マップでイベントを行うのに最適です。ページ読み込みのどの段階で要素が利用可能かを知るのは難しいため、外部スクリプトからのバインディングは時折問題を引き起こします。

しかし、関心の分離の観点からは、マークアップにイベントロジックを持たないことがもちろん最善です

もう 1 つは、ユーザーの接続についてです。イベントをハードコーディングすると、ユーザーがロードされていない関数を呼び出す何かをクリックする場合に、速度に関連する問題が増加することがあります。

また、スクリーン リーダーなどのマシンや、イベント処理属性を持つ JS を持たないデバイスの観点からは、基本的にページに無意味な情報を入力しているため、ページ サイズが大きくなります。

于 2010-05-05T12:09:39.577 に答える