Jquery中文網 www.afdoqc.live
Jquery中文網 >  jQuery  >  jquery 教程  >  正文 使用jQuery監聽DOM元素大小變化

使用jQuery監聽DOM元素大小變化

發布時間:2016-09-19   編輯:www.afdoqc.live
jquery中文網為您提供使用jQuery監聽DOM元素大小變化等資源,歡迎您收藏本站,我們將為您提供最新的使用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自定義函數的實現機制

您可能感興趣的文章:
jQuery的運行機制和設計理念分析
網站如何做到完全不需要jQuery也可以滿足簡單需求
jQuery 事件的命名空間簡單了解
jQuery 性能優化指南(2)
jquery ready函數源代碼研究
不要使用jQuery觸發原生事件的方法
jquery中的事件處理詳細介紹
autoIMG 基于jquery的圖片自適應插件代碼
jQuery中的.bind()、.live()和.delegate()之間區別分析
JQuery UI的拖拽功能實現方法小結

[關閉]
英格兰足球队