jQueryバインディングイベントの効率を向上させる方法-フロントエンドQ&A-php.cn

jQueryバインディングイベントの効率を向上させる方法

王林

リリース： 2023-05-28 11:51:37

オリジナル

501 人が閲覧しました

フロントエンドページの複雑さに伴い、JavaScript フレームワークも開発されており、その中でも jQuery は最も人気のあるフレームワークの 1 つです。 jQuery を使用して開発する場合、イベントバインディングは不可欠なタスクです。これにより、ページ上のインタラクティブな動作をより適切に制御できるようになり、複雑なインタラクションを実装する際のユーザーエクスペリエンスも向上します。ただし、イベントバインディングが正しくないと、パフォーマンスの問題が発生し、ページの応答速度に影響を与える可能性があります。したがって、この記事では、jQuery イベントバインディングの効率を向上させ、Web サイトをよりスムーズにする方法を検討します。

イベント委任の使用

イベント委任は、イベントバインディングの比較的効率的な方法です。その原則は、イベントを親要素にバインドし、イベントを通じて危険にさらすことです。バブルは子要素のイベントに応答するために使用され、これによりイベントバインディングの数が減り、パフォーマンスが向上します。たとえば、イベントにバインドする必要があるいくつかのボタンを含むテーブルがあるとします。次のメソッドを使用できます:

<table id="mytable">
  <tr>
    <td><button class="btn">按钮1</button></td>
    <td><button class="btn">按钮2</button></td>
    <td><button class="btn">按钮3</button></td>
  </tr>
  <tr>
    <td><button class="btn">按钮4</button></td>
    <td><button class="btn">按钮5</button></td>
    <td><button class="btn">按钮6</button></td>
  </tr>
</table>

ログイン後にコピー

$('#mytable').on('click', '.btn', function() {
  // 按钮的事件处理代码
});

ログイン後にコピー

この例では、jQuery の on () メソッドを使用します。 click イベントをバインドするには、子要素セレクター .btn を指定して 2 番目のパラメーターでイベントをバインドします。これにより、ボタンがクリックされたときにイベントがトリガーされます。

jQuery オブジェクトのキャッシュ

イベントバインディングのプロセスでは、DOM 要素を選択するために jQuery セレクターがよく使用されます。ただし、jQuery のセレクターエンジンは DOM 要素への参照をキャッシュしないため、選択ごとに新しい jQuery オブジェクトを再構築する必要があり、パフォーマンスに一定の影響を与えます。したがって、イベントバインディングプロセス中に、選択が繰り返されることを避けるために、選択された DOM 要素をキャッシュすることをお勧めします。たとえば、次のように記述できます。

var $myButton = $('button#mybutton');
$myButton.on('click', function() {
  // 按钮的事件处理代码
});

ログイン後にコピー

この例では、変数 $myButton を使用してクエリされたボタンオブジェクトをキャッシュし、イベントをバインドするときにこの変数を直接使用します。要素を削除し、繰り返し選択することによるパフォーマンスの問題を回避します。

セレクターの最適化

jQuery では、セレクターは、さまざまな方法でページ上の要素を照合できる非常に強力なツールです。ただし、セレクターの品質もバインディングイベントの効率に影響を与える重要な要素の 1 つです。したがって、実際のアプリケーションでは、セレクターを可能な限り最適化する必要があります。

セレクターを最適化するにはどうすればよいですか?まず、セレクターの複雑さに注意し、要素の選択速度に影響を与える過度に複雑なセレクターの使用を避ける必要があります。次に、特定のアプリケーションシナリオに応じて適切なセレクターを選択する必要があります。幅広いセレクターの場合は、選択を高速化するために可能な限り範囲を狭めることをお勧めします。

イベントのバインド解除

イベントのバインド解除は一般的な操作ですが、使用方法を誤るとパフォーマンスにも影響します。 jQuery では、イベントのバインドを解除する方法が 2 つあります。1 つは off() メソッドを使用する方法、もう 1 つは unbind() メソッドを使用する方法です。これら 2 つの方法の効果は同じですが、細かい違いがいくつかあります。

jQuery バージョン 1.7 以降を使用している場合は、off() メソッドを使用することをお勧めします。これは、新しいバージョンでは off()# メソッドが使用されるためです。 ## メソッドの方が優れている可能性があります。イベントの名前空間と複数のバインドの問題を効率的に処理し、一度に複数のイベントのバインドを解除できます。たとえば、次のように使用できます。

$myButton.off('click', '.btn1');

ログイン後にコピー

1.7 より前の jQuery バージョンを使用している場合は、次のように

unbind() メソッドを使用することをお勧めします。 #<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'>$myButton.unbind('click');</pre><div class="contentsignin">ログイン後にコピー</div></div>In 実際のアプリケーションでは、実際の状況に基づいて適切なアンバンドル方法を選択する必要があります。

イベント応答の繰り返し実行を減らす

要素は、keyup イベントと change イベントの両方にバインドされています。この場合、対処しないとイベント処理関数が繰り返し実行されることになり、性能に影響を与えます。この場合、debounce() メソッドを使用して問題を解決すると、イベントが繰り返しトリガーされるのを防ぐことができます。たとえば、次のコードはイベントハンドラーを最大 500 ミリ秒ごとに実行させることができます:

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'>function handler() {
  // 处理函数
}

$('input').on('keyup change', $.debounce(500, handler));</pre><div class="contentsignin">ログイン後にコピー</div></div>この例では、jQuery の on()<p> メソッドを使用してバインド<code> keyup

および change イベントを処理し、debounce() メソッドを使用して、処理関数を最大 500 ミリ秒ごとに 1 回実行することで、イベント応答の数を効果的に削減します。 debounce() メソッドを使用すると、一定の遅延が増加し、ユーザーエクスペリエンスに影響を与える可能性があるため、特定のニーズに基づいて使用するかどうかを決定する必要があることに注意してください。要約すると、jQuery イベントバインディングの効率の向上は、イベント委任の使用、jQuery オブジェクトのキャッシュ、セレクターの最適化、イベントの適切なバインド解除、イベント応答の繰り返し実行の削減など、多くの側面から始めることができます。これらのテクニックを適切に使用できれば、ページの応答速度が大幅に向上し、ユーザーにより良いエクスペリエンスを提供できます。

以上がjQueryバインディングイベントの効率を向上させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。