3

次の SO の質問に対する私の回答:イベント バインディングとはどういう意味ですか? 、JavaScript イベントをバインドするために inline-JavaScript/Early-Binding を使用することは「しばしば見当違い」であるという発言をしました。

例えば：

<input id="MyButton" type="button" value="clickme" onlick="Somefunction()" />

私は、マークアップで参照されている JavaScript がない「遅延バインディング」アプローチを主張していましたが、これは確立されたベスト プラクティスであると理解しています。しかし、コメンテーターは、その使用が必要な場合があったと主張し、私はこれらが何であるか疑問に思いました.

onclickいずれかの相対的なメリットについて議論しなくても、レイト バインディング アプローチよりも (eg) 属性を使用する必要がある状況を誰でも思いつくことができます。

4

3 に答える 3

2

コメンテーターは、その使用を必要とする機会があったと主張した

私はそれらのコメンテーターの一人だと思います。私が実際に言ったことは、インラインリスナーは「特定の状況では合理的なオプションです」ということでした。それが「必要」である場合はないと思います（この文脈では、必要であると理解しています）。

インライン リスナーの追加は、クライアントに適用されるのと同じロジックをサーバーに適用してリスナーを追加するだけであり、次の点で利点があります。

  1. マークアップを作成してキャッシュしたり、静的ページとして使用したりできます。リスナーは、ページがダウンロードされるときにすべてのクライアントによって何度も追加されるわけではありません。
  2. エレメントが使用可能になってからリスナーが DOMReady またはオンロード関数または「ボトム スクリプト」によって追加されるまでの遅延に関連する問題は完全に削除されます。
  3. onload フォールバックを備えたさまざまな「クロス ブラウザー」DOMReady 関数の気まぐれが削除されました。使用されていない場合、そのような関数がリスナーの追加に失敗する可能性はありません。

もちろん、これはすべてのリスナーをインラインで追加する必要があり、リスナーを動的に追加するのは無駄だという意味ではありません。特定の問題を解決する実行可能な方法であり、多くの場合、完全に合理的な解決策であることを指摘しておきます。

リスナーの「早期バインディング」が良いと思われる場合は、できるだけ早くそれを作成し、インラインに配置してください。:-)

PS。また、リスナーは実際の意味で要素にバインドされていないため、このコンテキストで「バインディング」を使用するのは好きではないと述べたと思います。それらは、要素が関連するイベントを受け取ったときに呼び出される単なる関数です。バインディングの唯一のタイプは、リスナーの this キーワードが関連する要素を参照するように設定できることです (これはインライン リスナーのすべてのブラウザーで一貫していますが、後で追加されたリスナーでは必ずしもそうではありません)。

于 2011-06-14T07:01:08.013 に答える
2

onclick属性が悪い理由:

onclick="foo()"

  • 要素がクリックされたときに実行時に評価されるコードの文字列を渡します。これは非効率的であり、eval
  • 関数をグローバルスコープに格納することを余儀なくされたためfoo、すべてのイベント処理ロジックでグローバルスコープが汚染されました。
于 2011-06-14T07:47:33.080 に答える
1

多くの開発者は、無知または知識不足 (もちろん、これはよくあることです) のためにこれを行うと思います。特定のオブジェクトと関数は常にすべてのページにロードされ、単に「そこにある」だけです。

これは、HTML が AJAX コールバックからのものである場合に特に当てはまると思います。AJAX 要求が HTML 応答と共に返され、その HTML がページに挿入される例を考えてみましょう。ここで、素朴な開発者は次のように考えます。

  • その応答 HTML 内にどの要素があるのか​​ わからないため、追加する必要がある遅延バインディングがわかりません。
  • 念のため、それらをすべて追加する必要があるかもしれません。または、要素を検出し、見つけた要素にバインドする解析スクリプトを作成しますか?
  • しかし、まだ存在しないものにバインドする必要がある場合はどうすればよいでしょうか? 長いインライン JavaScript を書く時が来ました!

このすべては、ページ上の現在および将来のすべての要素に適用される一種の遍在するバインディングを使用することで排除できます。jQuery では、同等のものはlive(). 書く代わりに：

$('.foo').click(function(){...});

あなたは書くことができます：

$('.foo').live('click', function(){...});

これで、現在存在しない要素を含め、クラス名が「foo」のすべての要素がクリックされると関数が実行されます。動的な AJAX インターフェイスに非常に役立ちます。

すでにご存知かもしれませんが、JS 属性でできることはすべて、純粋な JS の方が優れていることを指摘しているだけであり、そのベスト プラクティスを検討したいと思います。

于 2011-06-13T13:37:02.847 に答える