jQuery 瀏覽器事件：resize 與 scroll 的用法
常用的 瀏覽器事件 介紹及參數設定。這兩個事件的監聽對象通常都是 window 。
resize()
當目標元素的大小改變時觸發。
js
// 即將棄用
resize(handler);
// 改用
on('resize', handler);參數
| 功能 | 說明 | 型別 | 範例 | 備註 |
|---|---|---|---|---|
| handler | 執行事項 | Function | function() {} | 必填 |
範例
注意最後多呼叫了一次 resizeHandler() 。因為 resize 只在尺寸改變時才觸發，頁面剛載入時並不會執行，先手動叫一次畫面上才會有初始值。
html
<div id="Dom"></div>js
function resizeHandler() {
$('#Dom').text('width: ' + $(window).width() + 'px');
}
resizeHandler();
$(window).on('resize', resizeHandler);與 RWD 的分工
純樣式的斷點變化交給 CSS 的 媒體查詢 處理就好，只有需要依寬度改變 JavaScript 行為時，才需要監聽 resize 。
scroll()
當目標元素捲動時觸發。
js
// 即將棄用
scroll(handler);
// 改用
on('scroll', handler);參數
與前述相同。
範例
html
<div id="Dom" class="dom"></div>js
$(window).on('scroll', function () {
console.log('scrolling');
});css
.dom {
width: 100%;
height: 1000px;
}觸發非常頻繁
resize 與 scroll 在操作過程中每秒可能觸發數十次。處理函式若牽涉大量的 DOM 讀寫 就容易造成畫面卡頓，實務上建議搭配節流（throttle）或防抖（debounce），相關的計時器用法可參考 定時與排程 。
想取得目前捲動的位置，可以搭配 scrollTop() 。
常見問題
resize 只能監聽 window 嗎？
實務上絕大多數都是監聽 window。一般元素的尺寸變化不會觸發 resize，若真的需要，應該改用 ResizeObserver。
為什麼範例要先手動呼叫一次處理函式？
因為 resize 只在尺寸改變時才觸發，頁面剛載入時並不會執行。先呼叫一次，畫面上才會有初始值。
resize 和 scroll 會不會影響效能？
會。兩者在操作過程中都可能每秒觸發數十次，處理函式若牽涉大量 DOM 讀寫就容易造成卡頓，建議搭配節流（throttle）或防抖（debounce）。
scroll 可以監聽某個容器嗎？
可以。只要該容器本身有捲軸，就能對它註冊 scroll，取得捲動位置則使用 scrollTop() 。
RWD 的斷點判斷一定要用 resize 嗎？
不一定。純樣式的變化交給 CSS 的媒體查詢 處理即可，只有需要依寬度改變 JavaScript 行為時，才需要監聽 resize。
