HTML/JavaScriptでアーリーバインディング/インラインイベント属性を使用しなければならないケースはありますか?

Question

次のSOの質問に対する私の答えは次のとおりです。 イベントバインディングとはどういう意味ですか?, 私は、JavaScript イベントをバインドするための inline-JavaScript/Early-Binding の使用は「誤解されることが多い」とついでに発言しました。

例えば：

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

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

どちらの優劣について議論することなく、(例) を使用する必要がある状況を誰か考えられますか? onclick 遅延バインディング アプローチよりも属性を優先します。

どうもありがとう

Answer 1

多くの開発者は、無知または知識の欠如によりこれを行うと思います (もちろん、これはよくあることです)。残りの開発者は、単純に遅延バインディングより HTML-JS 属性を使用する方が便利であるという理由でこれを行うでしょう。特定のオブジェクトと関数は常にすべてのページにロードされ、単に「そこに存在」します。

これだと思います 特に HTML が AJAX コールバックから取得された場合は true。AJAX リクエストが HTML レスポンスとともに返され、その HTML がページに挿入される例を考えてみましょう。ここで、単純な開発者は次のような考え方をするでしょう。

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

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

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

次のように書くことができます:

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

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

すでにご存知かもしれませんが、私は JS 属性でできることは何でも、純粋な JS のほうが優れた機能があり、それがベスト プラクティスであると考えていることを指摘しているだけです。

Answer 2

コメント提供者は、その使用を必要とする場合があると主張しました

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

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

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

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

   リスナーの「早期バインド」が適切であると思われる場合は、できるだけ早く作成してください。インラインにしてください。 :-)

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

Answer 3

理由 onclick 属性が間違っています:

onclick="foo()"

• 要素がクリックされたときに実行時に評価されるコード文字列を渡します。これは非効率的であり、次のような恐ろしいことを利用します。 eval
• 関数を強制的に保存する foo グローバル スコープ内にあるため、すべてのイベント処理ロジックでグローバル スコープが汚染されます。