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

luxixing 發布于2019-08-21 12:08 / 1713人閱讀

摘要：但是又不知道如何為多說的評論按鈕增加回調函數，于是乎就想到了根據子元素的大小變化來重新計算父元素的。平常，都是在整個瀏覽器窗口變化時觸發一個修改布局的回調函數。

起因

今天寫頁面的時候突然有這么個需求，由于父元素（一個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自定義函數的實現機制

GPU云服務器云服務器監聽參數變化 js 監聽數據變化 js dom監聽 DOM元素

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87454.html

js監聽div元素的寬高變化

摘要：構造函數，參數為回調函數構造函數為，它在監聽到中的改變并且一系列改變結束后觸發回調函數。是要監聽的元素，為監聽選項對象，可選的選項如下所以監聽元素寬高變化，就是監聽屬性變化這樣當元素發生變化時，就會觸發構造函數中的函數。一、js監聽window變化的方法 1、onsize只能監聽window對象的變化 (1)、 window對象原生、jQuery方法 //原生寫法 window.on...

lansheng228 2019-08-23 18:21 評論0 收藏0
2019前端面試題匯總（主要為Vue）

摘要：畢業之后就在一直合肥小公司工作，沒有老司機沒有技術氛圍，在技術的道路上我只能獨自摸索。于是乎，我果斷辭職，在新年開工之際來到杭州，這里的互聯網公司應該是合肥的幾十倍吧。。。。畢業之后就在一直合肥小公司工作，沒有老司機、沒有技術氛圍，在技術的道路上我只能獨自摸索。老板也只會畫餅充饑，前途一片迷茫看不到任何希望。于是乎，我果斷辭職，在新年開工之際來到杭州，這里的互聯網公司應該是合肥的幾十...

arashicage 2019-08-23 15:21 評論0 收藏0
JSLite 的目標：縮小體積，做到 jQuery-free

摘要：轉載大牛的分析，這將是的方向。域名分析據統計，目前全世界的網站使用它。的市場份額不斷下降，以為基礎的標準語法，正得到越來越廣泛的支持。下面就探討如何用標準語法，取代的一些主要功能，做到。轉載大牛的分析，這將是JSLite的方向。前人栽樹后人乘涼，jQuery為我們制定了一套接口標準，我們繼續為此努力。域名：JSLite.io jQuery 分析據統計，目前全世界57.3%...

Scott 2019-08-22 10:55 評論0 收藏0
監聽div的resize

摘要：上網找了找，對于的事件的監聽，實現方式有很多，比如基于的小插件通過元素進行監聽來監聽元素基于的周期性檢查雖然是實現了對元素寬高的監聽，但看上去很瓜。簡單點說，就是：在被監聽的 div 中添加 iframe 標簽，設置其高寬均為 100%；在 iframe 的 resize 被觸發時，則表明 div 的大小正在改變！參考 Resize on div el...

TNFE 2019-08-23 12:10 評論0 收藏0
監聽div的resize

摘要：上網找了找，對于的事件的監聽，實現方式有很多，比如基于的小插件通過元素進行監聽來監聽元素基于的周期性檢查雖然是實現了對元素寬高的監聽，但看上去很瓜。簡單點說，就是：在被監聽的 div 中添加 iframe 標簽，設置其高寬均為 100%；在 iframe 的 resize 被觸發時，則表明 div 的大小正在改變！參考 Resize on div el...

legendaryedu 2019-08-02 11:37 評論0 收藏0