3

タイトルが少し曖昧または不明瞭かもしれないので、最初に2つの方法の意味を説明します。私のHTML/JSコードでは、イベントをhtml要素に添付する2つの方法を組み合わせています。（1）「静的」と呼ぶもの：

<input name="abc" class="def" id="xyz" onclick="do_something"/>

（2）私が「動的」と呼ぶもの：

<input name="abc" class="def" id="xyz" />

と

$(document).ready(function() {
    $('#xyz').click(function() { do_something; })
});

これは実際のコードではなく、例として提示するものにすぎないことに注意してください。私もjqueryを使用する必要はありません、同じことが簡単に達成できます

document.onload = function() {
    document.getElementById('xyz').onclick = function() { do_something; }
}

通常、ロジックが非常に単純な場合（たとえば、別の要素をクリックしたときに要素を有効/無効にする）、静的メソッドを使用します。ロジックがもっと複​​雑な場合は、動的なものを使用します。もちろん、onclick="function_call()"-を指定して静的メソッドを使用し、すべての複雑なロジックをこの関数に入れることもできますが、これはレガシー時代（数年前）のコードに残されている可能性があります。

今、私は、一方の方法で誓い、もう一方の方法を使用する人を嘲笑し、もう一方の方法が間違っている/読みにくい/遅くなる/自分の説明を追加するという人々に会いました。しかし、私は常に1つの方法に固執し、これらを混同し続ける本当に良い理由を見つけていません。私は何かが足りないのですか、それとも1つの方法に固執する正当な理由は本当にありませんか？

4

3 に答える 3

6

構造（HTML）、スタイル（CSS）、動作（JS）を分離する必要があります。

イベントはページの動作です-JSでそれを行います。

HTMLやCSSではなく、他の場所に配置しないでください（可能な場合）。

于 2012-04-13T10:11:04.280 に答える
2

静的：

  • ロジックとコンテンツを組み合わせる
  • 古い（正式には指定されていない）「DOM0」イベントモデルのみをサポートします
  • 複数のハンドラーをイベントにバインドすることはできません-DOM2を使用する必要があります。addEventListener().onXXX()
  • onXXX引用符が混在しているため、構文が複雑になります。属性内の引用符との衝突を避けるために、引用符をエスケープする必要がある場合があります。
于 2012-04-13T10:11:12.747 に答える
1

私の習慣は驚き最小の原則に従うことです。

私のページが99％HTMLで、Javascriptが1行または2行しかない場合は、インラインイベントを使用<div onclick="">して、addEventListenerの手荷物によるページの綿毛の量を最小限に抑えます。

ページが複雑すぎて要素が多すぎて、動作の分離によってgetElementByIdまたは$('.tree')セクションの大きなチャンクが発生し、実際に読みやすさが低下する場合（したがって、驚きのレベルが高くなります）、インラインイベントも使用します。

それ以外の場合は、構造と動作ルールの予想される分離を使用します。

于 2012-04-13T11:43:29.317 に答える