ResizeObserver 用來監控元素大小的變動，與 window 的 resize 事件(如下)的用途相似，通常用在監控瀏覽器視窗大小的變動。ResizeObserver 使用範圍更廣，可以綁在 HTMLElement 上。
window.addEventListener('resize', callback);
首先要建立一個 ResizeObserver 物件
const resizeObserver = new ResizeObserver(callback);
callback 是定義當指定的元素偵測到變化時，需要執行的動作，分為：
- entries：型態為陣列(array)。因為允許偵測多個變動元素，每個元素變動的大小、位置等資訊，會以 ResizeObserverEntry 物件裝在陣列內。
- observer：ResizeObserver 物件本身
const resizeObserver = new ResizeObserver((entries, observer) => {
entries.forEach(entry => {
// Do something to each entry
// and possibly something to the observer itself
});
});
再來，使用 oberve()開始監看元素
resizeObserver.observe(target, options);
target為需要偵測的元素
unobserve() 取消追蹤指定的元素
resizeObserver.unobserve(target);
可以使用disconnect()取消所有元素的追蹤
resizeObserver.disconnect();
接著，請參考 window resize 事件的範例，範例將視窗大小顯示，若resize發生時，將異動更新到畫面上，如果使用 ResizeObserver 要怎麼改寫：
<p>Resize the browser window to fire the <code>resize</code> event.</p> <p>Body height: <span id="height"></span></p> <p>Body width: <span id="width"></span></p>
const heightOutput = document.querySelector('#height');
const widthOutput = document.querySelector('#width');
const resizeObserver = new ResizeObserver(entries => {
entries.forEach(entry => {
heightOutput.textContent = entry.contentRect.height;
widthOutput.textContent = entry.contentRect.width;
});
});
resizeObserver.observe(document.querySelector('body'));
底下實作一個範例，用slider控制 div 區域的寬度，當增測的 div 變化時，依據寬度的數值改變 div 背景的透明度。
See the Pen ResizeObserver Example by chenuin (@chenuin) on CodePen.
參考資料: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
