使用jQuery監(jiān)聽DOM元素大小變化

更新時間：2016年02月24日 09:35:48 投稿：hebedich

jQuery resize event監(jiān)聽DOM元素大小變化 ,即可以綁定window以外的元素大小的變化，支持回調(diào)函數(shù)！

起因

今天寫頁面的時候突然有這么個需求，由于父元素（一個DIV）的height是由javascript計算出來的固定的值，而在其中增加了一個多說插件，在用戶評論后，子元素（DIV）的height屬性增加，導致子元素溢出。但是又不知道如何為多說的評論按鈕增加回調(diào)函數(shù)，于是乎就想到了根據(jù)子元素的大小變化來重新計算父元素的height。

onresize?

平常，都是在整個瀏覽器窗口變化時觸發(fā)一個修改布局的回調(diào)函數(shù)。使用的是window對象的resize事件，利用：

window.onresize = callback;

來綁定。但根據(jù)resize事件的target是defaultView (window)，這里詳見MDN的resize文檔，也就是說只有window對象有resize事件，于是乎就想到使用jQuery自己的事件機制來模擬一個普通元素上的resize事件

使用JQUERY事件的實現(xiàn)思路

可以想到一種比較簡單的方式：

1. 在元素綁定resize對象時，記錄元素的width和height
2. 使用requestAnimationFrame、setTimeout、setInterval，每隔一段時間查詢其width和height，如果和記錄的width和height不一樣，運行回調(diào)函數(shù)并更新記錄中的width為height

JQUERY插件

這個功能Ben Alman編寫了一個jQuery插件，傳送門
該插件的代碼（核心部分），詳細代碼請查看Ben Alman博客的內(nèi)容：

(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插件的開發(fā)者提供了添加自定義事件的接口，詳細可以參考jQuery官方文檔，這里就是典型的jQuery自定義事件添加方式，其中有三個鉤子：

1. setup：The setup hook is called the first time an event of a particular type is attached to an element.首次綁定時執(zhí)行，如果返回 false，使用默認方式綁定事件
2. teardown：The teardown hook is called when the final event of a particular type is removed from an element.若指定該方法，其在移除事件處理程序(removeEventListener)前執(zhí)行，如果返回 false，移除默認綁定事件
3. add：Each time an event handler is added to an element through an API such as .on(), jQuery calls this hook.每一次給元素綁定事件，都會執(zhí)行這個方法

setup、teardown和add三個鉤子，每個鉤子最先做的事都是檢測是否該對象為window對象，然后根據(jù)window對象特殊處理，因為window對象本身有resize事件

從setup鉤子可以看到，在初始化整個事件處理時，創(chuàng)建一個元素隊列，隊列中的每隔元素都把width和height放在data中，然后每隔250ms啟動loopy函數(shù)，在loopy函數(shù)中判斷是否變化，如果有變，觸發(fā)回調(diào)函數(shù)并更新data中的width和height

從teardown鉤子可以看到，在元素移除事件時，只需要將元素從元素隊列移除，并清除元素中的data數(shù)據(jù)。如果是元素隊列中的最后一個元素，則不再繼續(xù)執(zhí)行l(wèi)oopy

add鉤子中，對回調(diào)函數(shù)進行了包裝

由此可以看到一個簡單的jQuery自定義函數(shù)的實現(xiàn)機制

您可能感興趣的文章: