0

私は、js 開発者のコ​​ミュニティの周りで、これについてコンセンサスを得ることができることを望んでいます。

HTML ドキュメントの内部または外部で、onclick、onkeyup などのイベントを宣言する必要がありますか?

1）私はそれらを別々にすることを好みます。真実。2) また、HTML5 がゲームにいくつかの新しいインタラクティブな要素を追加していることも認識しています...

よろしく、MEM

4

4 に答える 4

3

Unobtrusive JavaScriptとjQueryについて読むことを検討してください。

于 2010-08-23T08:30:18.530 に答える
3

イベント ハンドラーをインラインで記述することは、少なくとも 10 年間、まったく悪い考えでした。

「element.onkeyup」のようなプロパティにアクセスすることさえ、かなり悪い考えです。

リスナーを使用します。さらに良いことに、フレームワーク。

編集：そして、ティム・ダウンのコメントがばかげている理由は次のとおりです。

  1. プログラミングの決定の論理的根拠が「必要になることがわかっている場合...」で始まる場合は、それを行わないでください。真剣に。

  2. 「すべてのスクリプト可能なブラウザー」とは、実際には IE5.5+ FF2+ Safari 3+ Opera 9+ を意味します。これは Web ユーザーの 99% 以上をカバーしており、これらのブラウザーはすべてイベント リスナーをサポートしています。イベント リスナーには、イベント ハンドラー プロパティへのアクセスよりも大きな利点があります。大きな利点は、任意のイベントに対して複数のリスナーが存在できることです。最新の Javascript プログラミングでは、これは常に発生します。時代遅れのイベント処理システムを使用するようにコードを特殊化するのは、ひどいアイデアであり、ライブラリの使用や目立たない一貫したコードの作成などの本当に優れたアイデアに対して敵対的です。

  3. return false;は、「このイベントを DOM ツリーの上下にバブリング/伝播するのをやめる」ことを意味する、直観に反し、意味論に反する方法です。何が直感的か知っていますか？のようなライブラリ コードの一般的な式event.stop()。

于 2010-08-23T08:30:19.787 に答える
2

イベント コードを定義し、それらのイベントを別の JS ファイル内の一致する要素に添付できる場合が理想的です。可能な限り JS と HTML を分離します。

于 2010-08-23T08:29:01.073 に答える
2

現在の一般的な意見は、すべてが目立たないようにする必要があるというものです。つまり、 などのイベント ハンドラー プロパティsomeElement.onclick = function(e) { ... };は広く嫌われており、 などのイベント ハンドラー属性<input type="button" onclick="doSomething()">は完全に却下されています。実際、どちらにも有効な用途があります。

動作 (スクリプト化されたイベント ハンドラーなど) をコンテンツから分離したいという欲求は自然なものであり、主要な考慮事項ですが、唯一の考慮事項ではありません。以下の要約に示されているように、イベント ハンドラーを作成する 3 つの方法にはそれぞれ長所と短所があり、特定の状況では、動作とコンテンツの分離が最優先事項ではない場合があります。

結論として、特定のタスクについては、ニーズに合った最も簡単な方法を使用してください。

イベント ハンドラーのプロパティ

例

myElement.onclick = function(e) { alert("Clicked"); };

これらは、スクリプトで作成した要素にイベント ハンドラーを割り当てる場合に特に便利で、必要なリスナーは 1 つだけです。

利点

  • 行動をコンテンツから切り離す
  • すべてのスクリプト可能なブラウザーで動作します
  • Event オブジェクトがどこから来るかという問題を除けば、すべてのブラウザーで同じように動作します ( window.eventIE では、他のブラウザーでは関数パラメーター)。
  • を使用してデフォルトのブラウザーの動作を防止する、広くサポートされている方法return false

短所

  • 特定のオブジェクトとイベントに対して 1 つのリスナーのみを許可する
  • HTML ソースの要素では、通常、ハンドラーはドキュメントが読み込まれるまで割り当てられません。

イベント ハンドラの属性

例

<input type="button" value="test" onclick="alert('Clicked');">

これは、ドキュメントの読み込みが完了する前に要素がイベントに応答することが重要な場合に有効な唯一のアプローチです (詳細については 、 http://peter.michaux.ca/articles/the-window-onload-problem-stillを参照してください)。これの）。また、イベント ハンドラーを追加する最も簡単な方法です。

利点

  • すべてのスクリプト可能なブラウザーで動作します
  • すべてのブラウザで同じように動作します
  • 要素がレンダリングされるとすぐに機能します
  • イベント ハンドラを追加する最も簡単な方法
  • を使用してデフォルトのブラウザーの動作を防止する、広くサポートされている方法return false
  • 非常に単純なページでは、これが最も読みやすい方法です
  • HTML 4 仕様で標準化

短所

  • 動作とコンテンツの混合
  • 特定のオブジェクトとイベントに対して 1 つのリスナーのみを許可する

addEventListener/attachEvent

例 (attachEvent に相当するものは示されていません)

myElement.addEventListener("click", function(e) { alert("Clicked"); }, false);

これは、特定のオブジェクトの特定のイベントに複数のリスナーをアタッチできる唯一の方法です。DOM Level 2 Events 仕様addEventListenerで標準化されています。

利点

  • 行動をコンテンツから切り離す
  • 複数のイベントリスナーを許可
  • addEventListenerは最新の標準であり、IE 9 でサポートされているため、現在のすべての主要なブラウザーが IE 9 のリリースでサポートされます。

短所

  • クロスブラウザーを正しく実装するのは少し複雑
  • IEattachEventは完全に同等ではありませんaddEventListener
  • HTML ソースの要素では、通常、ハンドラーはドキュメントが読み込まれるまで割り当てられません。
于 2010-08-23T11:09:15.050 に答える