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

原因

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

サイズ変更中?

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

window.onresize = callback;

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

jQuery イベントを使用する実装アイデア

比較的簡単な方法を考えることができます:
1. 要素がサイズ変更オブジェクトにバインドされているときに、要素の幅と高さを記録します
2. requestAnimationFrame、setTimeout、setIntervalを時々使用して幅と高さを問い合わせ、記録された幅と高さと異なる場合は、コールバック関数を実行し、記録された幅を高さに更新します

jQueryプラグイン

。この関数 Ben Alman が 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. イベント ハンドラーが追加されるたびに。 .on() などの API を介して要素にアクセスすると、jQuery はこのフックを呼び出します。このメソッドは、イベントが要素にバインドされるたびに実行されます

。最初に、各フックが 3 つあります。ウィンドウ オブジェクト自体にはサイズ変更イベントがあるため、オブジェクトがウィンドウ オブジェクトであるかどうかを検出し、ウィンドウ オブジェクトに従って特別に処理します

セットアップ フックからわかるように、初期化中、イベント処理全体中, 要素キューが作成され、キュー内の各要素に幅と高さが設定され、250ms ごとにループ関数が開始され、変更があるかどうかが判断されます。コールバック関数がトリガーされ、データの幅と高さが更新されます

ティアダウン フックからわかるように、要素がイベントを削除する場合、必要なのは要素キューから要素を削除し、要素内のデータをクリアすることだけです。これが要素キューの最後の要素である場合、loopy は実行されなくなります。追加フックでは、コールバック関数がラップされています。ここから、単純な jQuery

カスタム関数

の実装メカニズムがわかります。

以上がjQuery を使用して DOM 要素のサイズ変更を監視するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。