需求,监听一个div元素的高度变化,这个div是内容区的container,内容区元素的高度会随着内容的多与少发生变化。也就是说,div随着内容的多少自适应高度变化,要监听这个自适应高度的变化。

    第一反应,用resize事件
    比如对window,可以window.addEventListener(“resize”, handleResize)
    然而普通的dom元素没有onresize事件。

    去google,发现有说用MutationObserver的,尝试了一下MutationObserver,发现MutationObserver不能监听dom自适应变化,MutationObserver不适用于这个场景。

    注:
    MutationObserver用于监听DOM树结构变化,如DOM节点的增删改,DOM节点某个属性的变化等。

    最后使用ResizeObserver来监听div元素的resize事件。

    用法
    function handleResize() { … } // resize后的处理逻辑
    const theResizeObserver = new ResizeObserver( handleResize ); // 创建一个observer实例
    const theElement = document.getElementById(“content”);
    theResizeObserver.observe(theElement );

    代码示例见
    https://github.com/DiracKeeko/daily_test/blob/master/0073ResizeObserver.html

    注意:
    页面销毁时(准确的说是销毁前),需要取消观察,并把resizeObserver释放
    theResizeObserver.unobserve(theElement);
    theResizeObserver = null;
    JS写原生html考虑用window.onbeforeunload
    vue在beforeDestory生命周期中操作
    另外theResizeObserver的监听是一个高频发生的事件,建议给handleResize加上防抖。

    完结