Use jQuery to monitor DOM element size changes_jquery

Cause

When I was writing a page today, I suddenly had such a need. Since the height of the parent element (a DIV) is a fixed value calculated by javascript, a multi-talk plug-in was added to it. After the user comments, the child element (DIV)'s height attribute is increased, causing the child elements to overflow. But I didn’t know how to add a callback function for Duosuo’s comment button, so I thought of recalculating the height of the parent element based on the size change of the child element.

onresize?

Usually, a callback function that modifies the layout is triggered when the entire browser window changes. The resize event of the window object is used, using:

window.onresize = callback;

to bind. But according to the target of the resize event is defaultView (window), please see MDN's resize document for details. That is to say, only the window object has a resize event, so I thought of using jQuery's own event mechanism to simulate a resize event on an ordinary element

Implementation ideas using JQUERY events

You can think of a simpler way:

1. When the element is bound to the resize object, record the width and height of the element
2. Use requestAnimationFrame, setTimeout, and setInterval to query its width and height every once in a while. If it is different from the recorded width and height, run the callback function and update the recorded width to height

JQUERY plug-in

Ben Alman wrote a jQuery plug-in for this function, Portal
The code of the plug-in (core part), please check the content of Ben Alman’s blog for detailed 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 provides jQuery plug-in developers with an interface for adding custom events. For details, please refer to the jQuery official documentation. Here is a typical way to add jQuery custom events, which has three hooks:

1. setup: The setup hook is called the first time an event of a particular type is attached to an element. Executed when binding for the first time. If false is returned, the default method is used to bind the event
2. teardown: The teardown hook is called when the final event of a particular type is removed from an element. If this method is specified, it will be executed before removing the event handler (removeEventListener). If false is returned, the default binding will be removed. Event
3. add: Each time an event handler is added to an element through an API such as .on(), jQuery calls this hook. This method will be executed every time an event is bound to an element

There are three hooks: setup, teardown and add. The first thing each hook does is to detect whether the object is a window object, and then handle it specially according to the window object, because the window object itself has a resize event

As you can see from the setup hook, when initializing the entire event processing, an element queue is created. Every element in the queue puts width and height in data, and then starts the loopy function every 250ms. In the loopy function Determine whether there is a change. If there is a change, trigger the callback function and update the width and height in the data

As you can see from the teardown hook, when the element is removed, you only need to remove the element from the element queue and clear the data in the element. If it is the last element in the element queue, loopy will not continue to be executed

In the add hook, the callback function is wrapped

Here you can see the implementation mechanism of a simple jQuery custom function