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

luxixing 發(fā)布于2019-08-21 12:08 / 1720人閱讀

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

起因

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

onresize?

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

window.onresize = callback;

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

使用jQuery事件的實(shí)現(xiàn)思路

可以想到一種比較簡單的方式：
1. 在元素綁定resize對象時(shí)，記錄元素的width和height
2. 使用requestAnimationFrame、setTimeout、setInterval，每隔一段時(shí)間查詢其width和height，如果和記錄的width和height不一樣，運(yùn)行回調(diào)函數(shù)并更新記錄中的width為height

jQuery插件

這個(gè)功能Ben Alman編寫了一個(gè)jQuery插件，這是傳送門
該插件的代碼（核心部分），詳細(xì)代碼請查看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ā)者提供了添加自定義事件的接口，詳細(xì)可以參考jQuery官方文檔，這里就是典型的jQuery自定義事件添加方式，其中有三個(gè)鉤子：
1. setup：The setup hook is called the first time an event of a particular type is attached to an element.首次綁定時(shí)執(zhí)行，如果返回 false，使用默認(rèn)方式綁定事件
2. teardown：The teardown hook is called when the final event of a particular type is removed from an element.若指定該方法，其在移除事件處理程序(removeEventListener)前執(zhí)行，如果返回 false，移除默認(rèn)綁定事件
3. add：Each time an event handler is added to an element through an API such as .on(), jQuery calls this hook.每一次給元素綁定事件，都會(huì)執(zhí)行這個(gè)方法

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

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

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

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

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

云服務(wù)器 GPU云服務(wù)器監(jiān)聽參數(shù)變化 js 監(jiān)聽數(shù)據(jù)變化 js dom監(jiān)聽 DOM元素

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/87454.html

發(fā)表評論

登陸后可評論

0條評論

luxixing

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Pivo：$5/月KVM-4GB/40G SSD/2TB/鳳凰城機(jī)房

閱讀 2462·2021-10-08 10:17
??Java程序員開發(fā)了一套系統(tǒng)，賣了800萬，成都買了6套房

閱讀 1838·2021-09-06 15:02
Vue官網(wǎng)教程學(xué)習(xí)過程中值得記錄的一些事情

閱讀 2552·2019-08-29 17:30
面試可能會(huì)遇到的各種問題講解

閱讀 2676·2019-08-29 13:24
css學(xué)習(xí)(一) 樣式表及選擇器

閱讀 1535·2019-08-29 11:12
了解CSS中的@import

閱讀 3349·2019-08-28 17:52
MVC思想及其代碼過程

閱讀 676·2019-08-26 11:30
盤點(diǎn)一下Github上開源的Java面試/學(xué)習(xí)相關(guān)的倉庫

閱讀 3586·2019-08-26 11:01

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

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

相關(guān)文章

js監(jiān)聽div元素的寬高變化

2019前端面試題匯總（主要為Vue）

**JSLite 的目標(biāo)：縮小體積，做到 jQuery-free**

監(jiān)聽div的resize

監(jiān)聽div的resize

發(fā)表評論

0條評論

luxixing

男|高級(jí)講師

TA的文章

Pivo：$5/月KVM-4GB/40G SSD/2TB/鳳凰城機(jī)房

??Java程序員開發(fā)了一套系統(tǒng)，賣了800萬，成都買了6套房

Vue官網(wǎng)教程學(xué)習(xí)過程中值得記錄的一些事情

面試可能會(huì)遇到的各種問題講解

css學(xué)習(xí)(一) 樣式表及選擇器

了解CSS中的@import

MVC思想及其代碼過程

盤點(diǎn)一下Github上開源的Java面試/學(xué)習(xí)相關(guān)的倉庫

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

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

相關(guān)文章

發(fā)表評論

0條評論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！