ResizeObserver
和 addEventListener('resize')
是用于监测元素大小变化的两种不同的方法,它们有以下区别:
监测范围:
ResizeObserver
:ResizeObserver
是一个新的 Web API,它可以观察单个元素或多个元素的大小变化。可以通过创建ResizeObserver
实例并将其绑定到要观察的元素上来监测元素的大小变化。addEventListener('resize')
:resize
事件是浏览器原生提供的事件,可以通过addEventListener
方法将其绑定到window
对象上,用于监测浏览器窗口的大小变化。
触发时机:
ResizeObserver
:ResizeObserver
在元素的大小发生实际变化时才会触发回调函数,可以捕获更精确的大小变化。addEventListener('resize')
:resize
事件在浏览器窗口的大小变化时触发,包括用户手动调整窗口大小、设备旋转等情况。
性能优化:
ResizeObserver
:ResizeObserver
可以针对具体的元素进行监测,避免了不必要的计算和回调触发,从而提供更好的性能。addEventListener('resize')
:resize
事件绑定在window
对象上,每当窗口大小发生变化时都会触发,无法针对具体的元素进行优化。
综上所述,如果需要监测单个元素或多个元素的大小变化,并希望精确捕获大小变化的时机,可以使用 ResizeObserver
。而如果只需监测浏览器窗口大小的变化,可以使用 addEventListener('resize')
。选择使用哪种方法取决于具体的需求和场景。
用法
addEventListener('resize')用法
addEventListener('resize') 的用法