Verwenden Sie jQuery, um Änderungen der DOM-Elementgröße_jquery 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 wurde, wurde danach ein Multi-Talk-Plugin hinzugefügt In den Benutzerkommentaren wird das Höhenattribut des untergeordneten Elements (DIV) erhöht, was zu einem Überlauf der untergeordneten Elemente führt. Da ich jedoch nicht wusste, wie ich eine Rückruffunktion für die Kommentarschaltfläche von Duosuo hinzufügen sollte, 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:

window.onresize = callback;

zum Binden. 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 auf einem gewöhnlichen Element

Implementierungsideen mithilfe von JQUERY-Ereignissen

Sie können sich einen einfacheren Weg vorstellen:

1. Wenn das Element an das Größenänderungsobjekt gebunden ist, notieren Sie die Breite und Höhe des Elements
2. Verwenden Sie requestAnimationFrame, setTimeout und setInterval, um von Zeit zu Zeit seine Breite und Höhe abzufragen. Wenn sie von der aufgezeichneten Breite und Höhe abweicht, führen Sie die Rückruffunktion aus und aktualisieren Sie die aufgezeichnete Breite auf Höhe

JQUERY-Plug-in

Ben Alman hat ein jQuery-Plug-in für diese Funktion geschrieben, Portal
Den Code des Plug-Ins (Kernteil), bitte überprüfen Sie den Inhalt von Ben Almans Blog für den 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 jQuery-Dokumentation. Hier ist eine typische Methode zum Hinzufügen benutzerdefinierter jQuery-Ereignisse, die über drei Hooks verfügt:

1. Setup: Der Setup-Hook wird aufgerufen, wenn ein Ereignis eines bestimmten Typs zum ersten Mal angehängt wird. Wenn false zurückgegeben wird, wird die Standardmethode 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 Ereignishandlers (removeEventListener) ausgeführt wird entfernt 3. add: Jedes Mal, wenn ein Event-Handler über eine API wie .on() zu einem Element hinzugefügt wird, ruft jQuery diesen Hook auf. Diese Methode wird jedes Mal ausgeführt, wenn ein Event an ein Element gebunden wird

Es gibt drei Hooks: Setup, Teardown und Add. Das erste, was jeder Hook tut, ist, zu erkennen, ob das Objekt ein Fensterobjekt ist, und es dann speziell entsprechend dem Fensterobjekt zu behandeln, da das Fensterobjekt selbst eine Größenänderung hat Ereignis

Wie Sie dem Setup-Hook entnehmen können, wird beim Initialisieren der gesamten Ereignisverarbeitung eine Elementwarteschlange erstellt. Jedes Element in der Warteschlange fügt die Breite und Höhe in die Daten ein und startet dann alle 250 ms die Schleifenfunktion Stellen Sie fest, ob eine Änderung vorliegt, lösen Sie die Rückruffunktion aus und aktualisieren Sie die Breite und Höhe in den Daten

Wie Sie am Teardown-Hook sehen können, müssen Sie beim Entfernen des Elements nur das Element aus der Elementwarteschlange entfernen und die Daten im Element löschen. Wenn es das letzte Element in der Elementwarteschlange ist, wird Loopy nicht weiter ausgeführt

Im Add-Hook ist die Callback-Funktion eingeschlossen

Hier sehen Sie den Implementierungsmechanismus einer einfachen benutzerdefinierten jQuery-Funktion