ResizeObserver和addEventListener('resize')的区别

js yekong

ResizeObserveraddEventListener('resize') 是用于监测元素大小变化的两种不同的方法,它们有以下区别:

监测范围:

  • ResizeObserverResizeObserver 是一个新的 Web API,它可以观察单个元素或多个元素的大小变化。可以通过创建 ResizeObserver 实例并将其绑定到要观察的元素上来监测元素的大小变化。
  • addEventListener('resize')resize 事件是浏览器原生提供的事件,可以通过 addEventListener 方法将其绑定到 window 对象上,用于监测浏览器窗口的大小变化。

触发时机:

  • ResizeObserverResizeObserver 在元素的大小发生实际变化时才会触发回调函数,可以捕获更精确的大小变化。
  • addEventListener('resize')resize 事件在浏览器窗口的大小变化时触发,包括用户手动调整窗口大小、设备旋转等情况。

性能优化:

  • ResizeObserverResizeObserver 可以针对具体的元素进行监测,避免了不必要的计算和回调触发,从而提供更好的性能。
  • addEventListener('resize')resize 事件绑定在 window 对象上,每当窗口大小发生变化时都会触发,无法针对具体的元素进行优化。

综上所述,如果需要监测单个元素或多个元素的大小变化,并希望精确捕获大小变化的时机,可以使用 ResizeObserver。而如果只需监测浏览器窗口大小的变化,可以使用 addEventListener('resize')。选择使用哪种方法取决于具体的需求和场景。

用法

addEventListener('resize')用法

addEventListener('resize') 的用法

ResizeObserver用法

ResizeObserver用法

喜欢