在Javascript中使用ResizeObserver 监听dom元素

API介绍

当我们需要知道一个元素的大小变化或者屏幕横竖屏时,我们需要监听window.resize事件或者window.orientationchange方法。由于reize事件会在一秒内触发将近60次,所以很容易在改变窗口大小时导致性能问题。换句话说,window.resize事件通常是浪费的,因为它会监听每个元素的大小变化(只有window对象才有resize事件),而不是具体到某个元素的变化。如果我们只想监听某个元素的变化的话,这种操作就很浪费性能了。

而ResizeObserver API就可以帮助我们:监听一个DOM节点的变化,这种变化包括但不仅限于:

  1. 某个节点的出现和隐藏
  2. 某个节点的大小变化

ResizeObserver API是一个新的JavaScript API,与IntersectionObserver API非常相似,它们都允许我们去监听某个元素的变化。

实际上,ResizeObserver API使用了观察者模式,也就是我们常说的发布-订阅模式。发布-订阅模式是JavaScript中典型的设计模式,在很多地方都有使用到。如Nodejs的Event模块,Vue的父子组件通信等等。对发布-订阅模式不熟悉的同学可以看看《JavaScript设计模式与开发实践》这本书,对Vue的通信感兴趣的可以看看Vue官网啦。

ResizeObserver 接口可以监听到 Element 的内容区域或 SVGElement的边界框改变。内容区域则需要减去内边距padding。(有关内容区域、内边距资料见盒子模型 )

ResizeObserver避免了在自身回调中调整大小,从而触发的无限回调和循环依赖。它仅通过在后续帧中处理DOM中更深层次的元素来实现这一点。如果(浏览器)遵循规范,只会在绘制前或布局后触发调用。

构造器

ResizeObserver()

创建并返回一个ResizeObserver对象。

属性

无。

Event handlers

无。

方法

ResizeObserver.disconnect()

取消和结束目标对象上所有对 Element或 SVGElement 观察。

ResizeObserver.observe()

开始观察指定的 Element或 SVGElement

ResizeObserver.unobserve()

结束观察指定的Element或 SVGElement

示例

以下示例通过观察box的宽度变化从而改变其边框圆角半径。

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    console.log('大小位置', entry.contentRect)
    entry.target.style.borderRadius = Math.max(0, 250 - entry.contentRect.width) + 'px';
  }
});
resizeObserver.observe(document.querySelector('.box:nth-child(2)'));

规范

SpecificationStatusComment
Resize Observer
ResizeObserver
Editor's DraftInitial definition.

浏览器兼容性

Update compatibility data on GitHub

 DesktopMobile
 ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
ResizeObserverFull support64Full support79Full support69No supportNoFull support51Full support13.1Full support64Full support64No supportNoFull support47Full support13.4Full support9.0
ResizeObserver() constructorFull support64Full support79Full support69No supportNoFull support51Full support13.1Full support64Full support64No supportNoFull support47Full support13.4Full support9.0
disconnectFull support64Full support79Full support69No supportNoFull support51Full support13.1Full support64Full support64No supportNoFull support47Full support13.4Full support9.0
observeFull support64Full support79Full support69No supportNoFull support51Full support13.1Full support64Full support64No supportNoFull support47Full support13.4Full support9.0
unobserveFull support64Full support79Full support69No supportNoFull support51Full support13.1Full support64Full support64No supportNoFull support47Full support13.4Full support9.0

本文内容并非原创,仅为记录。文章来源:

https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver 。

https://zhuanlan.zhihu.com/p/41418813

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值