jQuery事件處理技巧：Decide resize (and scroll)
情境：
相信大家對 jQuery 的 resize 與 scroll 等事件並不陌生，近期在開發 jQuery Plugin 時 ， 碰到一個問題 ， 我需要在 resize 事件發生時 ， 針對 視窗的 放大 與 縮小 ， 執行不同的 method 與 event
這類的需求，其實是非常常見的，像是 scroll 事件中，只針對滾輪在 往上 滾動時，讓隱藏的選單出現於畫面中，就是我們在使用網頁的使用者體驗中，最常見的例子
作法 ：
此部份我以 resize 事件為範例， 同邏輯 scroll 事件也適用下列方法
範例：
(function($){
var previousDimensions = {
width: $(window).width(),
height: $(window).height()
}
$(window).resize(function () {
var newDimensions = {
width: $(window).width(),
height: $(window).height()
}
if (newDimensions.width > previousDimensions.width) {
// resize UP event
console.log('UP')
} else {
// resize Down event
console.log('DOWN')
}
previousDimensions = newDimensions
})
})(jQuery)
解析：
Step 1 :
建立變數，暫存 當前 屬性質 ， 作為判斷依據
var previousDimensions = {
width: $(window).width(),
height: $(window).height()
}
Step 2 :
在 事件(resize) 發生後，建立變數取得 事件後的 屬性質
$(window).resize(function () {
var newDimensions = {
width: $(window).width(),
height: $(window).height()
}
})
Step 3 :
接著就可以根據前 2 步驟 的參數，進行判斷 視窗的 放大 與 縮小，並執行對應的 事件 與 方法
$(window).resize(function () {
var newDimensions = {
width: $(window).width(),
height: $(window).height()
}
if (newDimensions.width > previousDimensions.width) {
// resize UP event
console.log('UP')
} else {
// resize Down event
console.log('DOWN')
}
})
Step 4 :
最後在 事件(resize) 結束後，更新 Step 1 作為判斷依據的參數
$(window).resize(function () {
var newDimensions = {
width: $(window).width(),
height: $(window).height()
}
if (newDimensions.width > previousDimensions.width) {
// resize UP event
console.log('UP')
} else {
// resize Down event
console.log('DOWN')
}
//更新參考依據
previousDimensions = newDimensions
})