Verwenden Sie jQuery, um Änderungen der DOM-Elementgröße zu überwachen

Ursache

Als ich heute eine Seite schrieb, hatte ich plötzlich ein solches Bedürfnis. Da die Höhe des übergeordneten Elements (ein DIV) ein fester Wert ist, der von Javascript berechnet wird, ist ein Multi-Talk-Plug-in erforderlich. in hinzugefügt wurde. Nach dem Benutzerkommentar wird das Höhenattribut des untergeordneten Elements (DIV) erhöht, was zu einem Überlauf des untergeordneten Elements führt. Aber ich wusste nicht, wie ich eine Rückruffunktion für Duosuos Kommentarschaltfläche hinzufügen sollte, also dachte ich darüber nach, die Höhe des übergeordneten Elements basierend auf der Größenänderung des untergeordneten Elements neu zu berechnen.

onresize?

Normalerweise wird eine Rückruffunktion ausgelöst, die das Layout ändert, wenn sich das gesamte Browserfenster ändert. Das Größenänderungsereignis des Fensterobjekts wird verwendet und gebunden mit:

window.onresize = callback;

. Da das Ziel des Größenänderungsereignisses jedoch „defaultView“ (Fenster) ist, lesen Sie bitte das Größenänderungsdokument von MDN. Das heißt, nur das Fensterobjekt verfügt über ein Größenänderungsereignis, daher habe ich darüber nachgedacht, den eigenen Ereignismechanismus von jquery zu verwenden, um eine Größenänderung zu simulieren Ereignis für ein gewöhnliches Element

Die Implementierungsidee der Verwendung von jQuery-Ereignissen

Sie können sich einen relativ einfachen Weg vorstellen:
1. Wenn das Element an gebunden ist Ändern Sie die Größe des Objekts und zeichnen Sie die Breite und Höhe des Elements auf
2. Verwenden Sie requestAnimationFrame, setTimeout und setInterval, um seine Breite und Höhe in regelmäßigen Abständen abzufragen. Wenn sie von der aufgezeichneten Breite und Höhe abweichen, führen Sie die Rückruffunktion aus und aktualisieren Sie sie die aufgezeichnete Breite zu Höhe

jQuery-Plugin

Ben Alman hat ein jQuery-Plugin für diese Funktion geschrieben, das den Code (Kernteil) des Portals darstellt
Der Inhalt von Ben Almans Blog für detaillierten Code:

(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 bietet jQuery-Plug-in-Entwicklern eine Schnittstelle zum Hinzufügen benutzerdefinierter Ereignisse. Weitere Informationen finden Sie in der offiziellen Dokumentation von jQuery um benutzerdefinierte jQuery-Ereignisse hinzuzufügen, die über drei Hooks verfügen:
1. Der Setup-Hook wird aufgerufen, wenn ein Ereignis eines bestimmten Typs zum ersten Mal an ein Element angehängt wird. Wenn „false“ zurückgegeben wird, ist dies die Standardeinstellung Methode wird verwendet, um das Ereignis
zu binden. 2. Teardown: Der Teardown-Hook wird aufgerufen, wenn das letzte Ereignis eines bestimmten Typs aus einem Element entfernt wird. Wenn diese Methode angegeben ist, wird sie vor dem Entfernen des Ereignisses ausgeführt handler -Programm (removeEventListener). Wenn false zurückgegeben wird, wird das standardmäßig gebundene Ereignis
entfernt. 3. Hinzufügen: Jedes Mal, wenn ein Ereignishandler zu einem Element über eine API wie .on() hinzugefügt wird ruft diesen Hook auf. Jedes Mal, wenn ein Ereignis an ein Element gebunden wird, werden die drei Hooks

setup, Teardown und Add ausgeführt. Das erste, was jeder Hook tut, ist, zu erkennen, ob das Objekt ein Fensterobjekt ist. und behandeln Sie es dann speziell entsprechend dem Fensterobjekt, da das Fensterobjekt selbst über ein Größenänderungsereignis verfügt.

Wie Sie am Setup-Hook sehen können, wird das gesamte Ereignis initialisiert. Erstellen Sie bei der Verarbeitung eine Elementwarteschlange In der Warteschlange werden Breite und Höhe in die Daten eingefügt und dann alle 250 ms die Schleifenfunktion gestartet. In der Schleifenfunktion wird beurteilt, ob eine Änderung vorliegt, und die Rückruffunktion wird ausgelöst aktualisiert. Die Breite und Höhe in

kann am Teardown-Hook gesehen werden. Wenn das Element das Ereignis entfernt, muss es nur das Element aus der Elementwarteschlange entfernen und die Daten darin löschen das Element. Wenn es das letzte Element in der Elementwarteschlange ist, wird die Ausführung nicht mehr im Add-Hook fortgesetzt.

Daraus können Sie einen einfachen jQuery-Implementierungsmechanismus erkennen Funktion

Das obige ist der detaillierte Inhalt vonVerwenden Sie jQuery, um Änderungen der DOM-Elementgröße zu überwachen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!