运用jQuery监听DOM元素大小变化

原由

本日写页面的时刻倏忽有这么个需求,由于父元素(一个DIV)的height是由javascript盘算出来的牢固的值,而在个中增添了一个多说插件,在用户批评后,子元素(DIV)的height属性增添,致使子元素溢出。然则又不晓得如作甚多说的批评按钮增添回调函数,于是乎就想到了依据子元素的大小变化来从新盘算父元素的height。

onresize?

寻常,都是在全部浏览器窗口变化时触发一个修正规划的回调函数。运用的是window对象的resize事宜,应用:

window.onresize = callback;

来绑定。但依据resize事宜的target是defaultView (window),这里详见MDN的resize文档,也就是说只要window对象有resize事宜,于是乎就想到运用jQuery自身的事宜机制来模仿一个一般元素上的resize事宜

运用jQuery事宜的完成思绪

能够想到一种比较简朴的体式格局:
1. 在元素绑定resize对象时,纪录元素的width和height
2. 运用requestAnimationFrame、setTimeout、setInterval,每隔一段时间查询其width和height,假如和纪录的width和height不一样,运转回调函数并更新纪录中的width为height

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官方文档,这里就是典范的jQuery自定义事宜增加体式格局,个中有三个钩子:
1. setup:The setup hook is called the first time an event of a particular type is attached to an element.初次绑定时实行,假如返回 false,运用默许体式格局绑定事宜
2. teardown:The teardown hook is called when the final event of a particular type is removed from an element.若指定该要领,其在移除事宜处置惩罚顺序(removeEventListener)前实行,假如返回 false,移除默许绑定事宜
3. add:Each time an event handler is added to an element through an API such as .on(), jQuery calls this hook.每一次给元素绑定事宜,都邑实行这个要领

setup、teardown和add三个钩子,每一个钩子最早做的事都是检测是不是该对象为window对象,然后依据window对象特别处置惩罚,由于window对象自身有resize事宜

从setup钩子能够看到,在初始化全部事宜处置惩罚时,建立一个元素行列,行列中的每隔元素都把width和height放在data中,然后每隔250ms启动loopy函数,在loopy函数中推断是不是变化,假如有变,触发还调函数并更新data中的width和height

从teardown钩子能够看到,在元素移除事宜时,只需要将元素从元素行列移除,并消灭元素中的data数据。假如是元素行列中的末了一个元素,则不再继承实行loopy

add钩子中,对回调函数进行了包装

由此能够看到一个简朴的jQuery自定义函数的完成机制

    原文作者:天镶
    原文地址: https://segmentfault.com/a/1190000000406026
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞