Use jQuery to monitor DOM element size changes

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 height attribute of the child element (DIV) is increased, causing the child element 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, and is bound using:

window.onresize = callback;

. 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 idea of ​​using jQuery events

You can think of a relatively simple 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 at regular intervals. 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. This is the portal.
The code (core part) of the plug-in. For detailed code, please check the content of Ben Alman’s blog:

(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 is The developer of the jQuery plug-in provides an interface for adding custom events. For details, please refer to the jQuery official documentation. Here is the 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 first binding. 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 program (removeEventListener). If false is returned, the default binding event will be removed
3. add: Each time an event handler is added to an element through an API such as .on(), jQuery calls this hook. Every time an event is bound to an element, this method

setup, teardown and add three hooks will be executed. The first thing a 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 , create an element queue. Every element in the queue puts the width and height in the data, and then starts the loopy function every 250ms. In the loopy function, it is judged whether there is a change. If there is a change, the callback function is triggered and the data is updated. width and height

As you can see from the teardown hook, when the element removes the event, 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 no longer continue to be executed.

In the add hook, the callback function is wrapped

You can see a simple jQuery Implementation mechanism of custom function

The above is the detailed content of Use jQuery to monitor DOM element size changes. For more information, please follow other related articles on the PHP Chinese website!