5

まず第一に、私は Chrome 開発ツールを使用してさまざまなアプローチをテストしていますが、今日の最新のブラウザーで JS の「専門家」とは考えていないため、テストを補完する追加のフィードバックを探しています。

クリック イベントを処理する必要がある 600 以上の要素が定期的に含まれるページがあります。これにアプローチするには、少なくとも 3 つのかなり異なる方法を考えることができますが、ページ サイズ、速度、JS メモリの問題、オブジェクト数に関連する問題 (パフォーマンスと安定性の両方の観点から) について考えています。

  1. onClick="foo(this);" を含める 要素ごとに、含まれている.jsファイルの1つで関数を定義します。-- より大きなページ、一度定義された関数、JS のメモリ フットプリントは小さいと思いますが、ページ全体のメモリ フットプリントは大きいと思います。
  2. jQuery と $(selector).click(foo(this)); を使用します。- ページが小さく、関数が一度定義されると、JS のメモリ フットプリントが大きくなると思いますが、ページ全体は小さくなります。
  3. jQuery と $(selector).click(function(this) { }); を使用します。- 最小のページ、関数は 1 回定義されますが、これはメモリの点で最も要求が厳しいと予想されます (また、jQuery または JS 全体であいまいな問題が発生するのではないかと心配しています) が、概念的には最もエレガントです。

jQuery が実行されると予想されるほぼすべてのブラウザーをサポートする必要があります。アイテムの数はさらに増える可能性があります (4 倍または 5 倍になる可能性があります)。

より良い別のアプローチがあれば、ぜひ聞きたいです。私の3つのアプローチの利点/落とし穴について誰かが私を教育したいなら、私もそれを本当に感謝しています.

4

4 に答える 4

8

多数の同様の要素を 1 つのイベントにバインドする最も効率的な方法は、イベント バブリングを利用することです。単一のイベント ハンドラーを共通の親オブジェクトにアタッチし、単一のイベント ハンドラーで、イベントが発生したオブジェクトを調べて、元のオブジェクトがこのイベントを監視しているオブジェクトであるかどうかを確認します。

イベントをアタッチするために必要なイベント ハンドラーは 1 つだけで、その 1 つのイベント ハンドラーから無数の子オブジェクトを提供できます。

各イベントの実行時にパフォーマンスがわずかに低下します (おそらく目立たない程度です)。これは、イベント ハンドラーがイベントを認識する前にイベントが親にバブルアップする必要があり、イベント ハンドラーがソース オブジェクトが目的のターゲット オブジェクトであるかどうかを確認する必要があるためです。か否か。ただし、何千もの個別のイベント ハンドラーをインストールするよりも、1 つのイベント ハンドラーをインストールする方がはるかに効率的です。

委任されたイベント処理には、動的に作成されたオブジェクト、イベント ハンドラーのインストール後に作成されたオブジェクトでもうまく機能するという利点もあります。これは、オブジェクト自体に直接インストールされたイベント ハンドラー (委任されていないイベント ハンドラー) ではうまく機能しないものです。 .

jQuery では、委任されたイベント処理を次のように使用できます。

$(common parent selector).on('click', selector of target objects, function() {});

たとえば、HTML:

<div id="parent">
    <button class="addButton">Add</button>
    <button class="addButton">Add</button>
    <button class="addButton">Add</button>
    <button class="addButton">Add</button>
    <button class="addButton">Add</button>
    <button class="addButton">Add</button>
    <button class="addButton">Add</button>
    <button class="addButton">Add</button>
    <button class="addButton">Add</button>
    <button class="addButton">Add</button>
    <button class="addButton">Add</button>
</div>

コード：

$("#parent").on('click', ".addButton", function(e) {
    // the value of `this` is set to the object that originated the event
    //     e.g. what was clicked on
});
于 2013-03-24T05:01:36.770 に答える
2

ここで説明されている「on」イベントハンドラーの委任されたバージョンを見て ください http://api.jquery.com/on/

「直接および委任されたイベント」というタイトルのセクション

于 2013-03-24T03:02:16.437 に答える
0

ネイティブ js でこのような単純なことを行うことができます。

<div id="test">
    <input type="button" value="Button 1"/>
    <input type="button" value="Button 2"/>
    <input type="button" value="Button 3"/>
</div>
<script>
    var parent = document.getElementById('test');
    parent.onclick = function(e){
        alert(e.target.value);
    };
</script>
于 2013-03-24T05:11:14.500 に答える
0

これには、 jQuery の on() メソッドを使用する必要があります。On を使用すると、高レベルの DOM ノード (ドキュメントなど) にハンドラーをアタッチし、イベントがトリガーされたときにイベント バブリングに依存してハンドラーを実行できます。

$(document).on('click', [selector], [data], handler);
于 2013-03-24T03:01:28.097 に答える