jQuery を使用して DOM 要素のサイズ変更を監視する_jquery

原因

今日ページを書いていたら急に必要になったので、親要素(DIV)の高さがJavaScriptで計算される固定値なので、それにマルチトークプラグインを追加しました。ユーザーのコメントにより、子要素 (DIV) の高さ属性が増加し、子要素がオーバーフローします。しかし、Duosuo のコメントボタンにコールバック関数を追加する方法がわからなかったので、子要素のサイズ変更に基づいて親要素の高さを再計算することを考えました。

サイズ変更しますか?

通常、レイアウトを変更するコールバック関数は、ブラウザ ウィンドウ全体が変更されたときにトリガーされます。ウィンドウ オブジェクトのサイズ変更イベントが次のように使用されます:

window.onresize = callback;

をバインドします。ただし、サイズ変更イベントの対象はdefaultView (ウィンドウ)であるため、詳細はMDNのサイズ変更ドキュメントを参照してください。つまり、ウィンドウオブジェクトのみがサイズ変更イベントを持っているため、jQuery独自のイベントメカニズムを使用してサイズ変更をシミュレートすることを考えました。通常の要素のイベント

JQUERY イベントを使用した実装アイデア

もっと簡単な方法を考えることができます:

1. 要素がサイズ変更オブジェクトにバインドされている場合、要素の幅と高さを記録します
2. requestAnimationFrame、setTimeout、setInterval を使用して、その幅と高さを時々クエリし、記録された幅と高さと異なる場合は、コールバック関数を実行して、記録された幅を高さに更新します

。

JQUERY プラグイン

Ben Alman は、この機能、Portal
用の jQuery プラグインを作成しました。 プラグインのコード (コア部分) の詳細なコードについては、Ben Alman のブログ の内容を確認してください:

(function($, window, undefined) {
 var elems = $([]),
  jq_resize = $.resize = $.extend($.resize, {}),
  timeout_id,
  str_setTimeout = 'setTimeout',
  str_resize = 'resize',
  str_data = str_resize + '-special-event',
  str_delay = 'delay',
  str_throttle = 'throttleWindow';
 jq_resize[str_delay] = 250;
 jq_resize[str_throttle] = true;
 $.event.special[str_resize] = {
  setup: function() {
   if (!jq_resize[str_throttle] && this[str_setTimeout]) {
    return false;
   }
   var elem = $(this);
   elems = elems.add(elem);
   $.data(this, str_data, {
    w: elem.width(),
    h: elem.height()
   });
   if (elems.length === 1) {
    loopy();
   }
  },
  teardown: function() {
   if (!jq_resize[str_throttle] && this[str_setTimeout]) {
    return false;
   }
   var elem = $(this);
   elems = elems.not(elem);
   elem.removeData(str_data);
   if (!elems.length) {
    clearTimeout(timeout_id);
   }
  },
  add: function(handleObj) {
   if (!jq_resize[str_throttle] && this[str_setTimeout]) {
    return false;
   }
   var old_handler;
   function new_handler(e, w, h) {
    var elem = $(this),
     data = $.data(this, str_data);
    data.w = w !== undefined ? w : elem.width();
    data.h = h !== undefined ? h : elem.height();
    old_handler.apply(this, arguments);
   }
   if ($.isFunction(handleObj)) {
    old_handler = handleObj;
    return new_handler;
   } else {
    old_handler = handleObj.handler;
    handleObj.handler = new_handler;
   }
  }
 };

 function loopy() {
  timeout_id = window[str_setTimeout](function() {
   elems.each(function() {
    var elem = $(this),
     width = elem.width(),
     height = elem.height(),
     data = $.data(this, str_data);
    if (width !== data.w || height !== data.h) {
     elem.trigger(str_resize, [data.w = width, data.h = height]);
    }
   });
   loopy();
  }, jq_resize[str_delay]);
 }
})(jQuery, this);

jQuery は、jQuery プラグイン開発者にカスタム イベントを追加するためのインターフェイスを提供します。詳細については、jQuery の公式ドキュメントを参照してください。これには、3 つのフックがある jQuery カスタム イベントを追加する一般的な方法があります。

1. セットアップ: 特定のタイプのイベントが初めてバインドされるときに、セットアップ フックが呼び出されます。 false が返された場合、デフォルトのメソッドがイベントのバインドに使用されます。 🎜> 2. ティアダウン: ティアダウン フックは、特定のタイプの最後のイベントが要素から削除されるときに呼び出されます。このメソッドが指定されている場合、イベント ハンドラー (removeEventListener) を削除する前に実行されます。 false が返された場合は、デフォルトのバインディングが返されます。イベント

は削除されます。 3. add: .on() などの API を通じてイベント ハンドラーが要素に追加されるたびに、jQuery はこのフックを呼び出し、イベントが要素
にバインドされるたびにこのメソッドが実行されます。
setup、teardown、add の 3 つのフックがあります。各フックが最初に行うことは、オブジェクトがウィンドウ オブジェクトであるかどうかを検出し、ウィンドウ オブジェクト自体にサイズ変更があるため、ウィンドウ オブジェクトに応じて特別に処理することです。イベント

セットアップフックからわかるように、イベント処理全体を初期化するときに、キュー内のすべての要素が幅と高さをデータに格納し、ループ関数内で 250 ミリ秒ごとにループ関数を開始します。変更があるかどうかを判断し、変更がある場合はコールバック関数をトリガーし、データの幅と高さを更新します

ティアダウン フックからわかるように、要素が削除されるときは、要素を要素キューから削除し、要素内のデータをクリアするだけで済みます。それが要素キューの最後の要素である場合、loopy は実行され続けません

追加フックでは、コールバック関数がラップされています

ここでは、単純な jQuery カスタム関数の実装メカニズムを確認できます