起因
今天寫頁面的時候突然有這麼個需求,由於父元素(一個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. 加碼: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監聽DOM元素大小變化的詳細內容。更多資訊請關注PHP中文網其他相關文章!