0

さて、私はウェブページを構築しており、JQuery の使用を開始しました。リスナー (keyup、focusin、focusout...) でよく使用します。

保管方法について質問があります。

私が持っているページの 1 つには、ユーザーが日付を選択すると、php スクリプトがテーブルに大量のデータを返す動的コンテンツが含まれています。これらのテーブルには、セルを押すと領域が開き、フォームのhtmlコードをロードするjavascript関数があります。このフォームはすべてのセルで同じです。押されたセルに応じて時間と日付が変わるだけです。私の解決策は、このhtmlが言及されたjavascript関数を使用して書かれたということでした。

そのフォームで、いくつかのイベントがトリガーされたときに、リスナーを割り当てます。

function livesearch(el, about, event) {
    if ( event.keyCode < 96 || event.keyCode > 105 ) {
        return;
    }

    var keyword = el.value;

    $(el).focusout(function() {
        $('#livesearch_results1').html('');
        $('#livesearch_results2').html('');
    });
...
}

動作しますが、正確性について疑問に思っていました。これらのリスナーは、新しいフォームが作成されるたびにスタックしますか...それらは互いに上書きしますか(フォームはすべてのセルに対して同じjavascriptによって生成されるため、IDは同じです)

4

1 に答える 1

2

デリゲート イベントを使用: $.on

例:

$("body").on("focusout","yourelement",function(){
});

$("body").on("focusin","yourelement",function(){
});

私が投稿したリンクの直接および委任されたイベントセクションの下。以下が表示されます。

イベント ハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードが .on() を呼び出す時点でページに存在している必要があります。要素が存在し、選択できることを確認するには、ページの HTML マークアップにある要素のドキュメント対応ハンドラー内でイベント バインディングを実行します。新しい HTML がページに挿入されている場合は、要素を選択し、新しい HTML がページに配置された後にイベント ハンドラーを添付します。または、次に説明するように、委任されたイベントを使用してイベント ハンドラーをアタッチします。

委任されたイベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。委任されたイベント ハンドラーがアタッチされた時点で存在することが保証されている要素を選択することで、委任されたイベントを使用して、イベント ハンドラーを頻繁にアタッチおよび削除する必要がなくなります。この要素は、Model-View-Controller デザインのビューのコンテナー要素、またはイベント ハンドラーがドキュメント内のすべてのバブリング イベントを監視する必要がある場合はドキュメントのコンテナー要素である可能性があります。document 要素は、他の HTML をロードする前にドキュメントの head で使用できるため、ドキュメントの準備が整うのを待たずに安全にイベントをアタッチできます。

まだ作成されていない子孫要素のイベントを処理できることに加えて、委譲イベントのもう 1 つの利点は、多くの要素を監視する必要がある場合のオーバーヘッドを大幅に削減できることです。tbody に 1,000 行を含むデータ テーブルで、この例では、ハンドラを 1,000 要素にアタッチします。

この投稿でメリットを再度説明する必要はないと思います。ドキュメントは非常に明確に説明しています。

于 2013-06-10T08:45:38.787 に答える