一、js监听window变化的方法
1、onsize只能监听window对象的变化
(1)、 window对象原生、jQuery方法
1 2 3 4 5 6 7 8 9 10 | //原生写法 window.onsize = function(){ console.log( "11" ); } //jquery写法 $(window).resize(function(){ console.log( "22" ); }) //注意:浏览器窗口大小改变时,这段代码会执行多次,对性能影响大,容易造成浏览器假死。 |
(2)、实现不管窗口怎么改变,只在停止改变之后才执行代码
1 2 3 4 5 6 7 8 9 10 11 | var resizeTimer = null ; $(window).resize(function(){ if (resizeTimer){ clearTimeout(resizeTimer); } resizeTimer = setTimeout(function(){ console.log( "窗口改变" ) },100) }) //通过使用定时器的方式来让代码延迟执行,每次窗口改变的时候就清除事件,只有停下改变之后才会继续再执行,解决resize执行多次的问题。 |
二、js监听div容器变化的方法
1、MutationObserver
(1)、介绍: MutationObserver 可以用来监听整个DOM中的变化。
(2)、构造函数,参数为回调函数
构造函数为window.MutationObserver,它在监听到DOM中的改变并且一系列改变结束后触发回调函数。他与事件不同的是:它在DOM变化时,会记录每一个DOM的变化(为一个MutationRecord对象),到DOM变化结束时触发回调函数。DOM变化可能是一系列的(比如同时改变宽和高),那么这一系列的变化就会产生一个队列,这个队列会作为参数传递给回调函数。
由于浏览器差异。一些版本的浏览器各自支持了构造函数,但是用法一致的。实例化一个观察者,代码如下:
1 2 | let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; let observer = new MutationObserver(callback); |
(3)、常用三个API接口
1️⃣、observe(element,options) 配置MutationObserver在DOM更改匹配给定选项时,通过其回调函数开始接收通知。
element是要监听的DOM元素,options为监听选项对象,可选的选项如下:
所以监听元素宽高变化,就是监听style属性变化
1 | observer.observe(element,{attributes: true ,attributeFilter:[ 'style' ],attributeOldValue: true }); |
//这样当元素style发生变化时,就会触发构造函数中的callback函数。即: let observer = new MutationObserver(callback) ,触发这里的callback。
2️⃣、 disconnect() 阻止 MutationObserver 实例继续接收的通知,直到再次调用其observe方法,该观察者对象包含的回调函数都不会再被调用。
3️⃣、 takeRecords() 从MutationObserver的通知队列中删除所有待处理的通知,并将它们返回到一个MutationRecord对象构成的新数组中。
2、vue示例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | <template> <div class = "container" > <div class = "resize-element" > 改变大小试试 </div> <div class = "resize-record" > 触发了{{firedNum}}次resize事件。 </div> </div> </template> <script> export default { showName: '监听DOM变化' , data () { return { observer: null , firedNum: 0, recordOldValue: { // 记录下旧的宽高数据,避免重复触发回调函数 width: '0' , height: '0' } } }, mounted () { let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver let element = document.querySelector( '.resize-element' ) this .observer = new MutationObserver((mutationList) => { for ( let mutation of mutationList) { console.log(mutation) } let width = getComputedStyle(element).getPropertyValue( 'width' ) let height = getComputedStyle(element).getPropertyValue( 'height' ) if (width === this .recordOldValue.width && height === this .recordOldValue.height) return this .recordOldValue = { width, height } this .firedNum += 1 }) this .observer.observe(element, { attributes: true , attributeFilter: [ 'style' ], attributeOldValue: true }) }, beforeDestroyed () { if ( this .observer) { this .observer.disconnect() this .observer.takeRecords() this .observer = null } } } </script> <style lang= "stylus" scoped> .container position relative .resize-element transform translate(-50%, -50%) position absolute top 50% left 50% height 10rem width 10rem overflow hidden resize both display block box-shadow 0 0 1px 1px #3361D8 border-radius 2px </style> |
注意:这里记录了旧的宽高数据来避免重复触发回调函数,这样做的原因在于宽高数据改变时,不一定是整数,而MutationRecord.recordOldValue中记录的是取整后的数据,这样就会导致在拖动改变DOM元素的宽高时,数值一直在整数和小数之间跳动,会多次触发。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· 本地部署 DeepSeek:小白也能轻松搞定!
· 如何给本地部署的DeepSeek投喂数据,让他更懂你
· 从 Windows Forms 到微服务的经验教训
· 李飞飞的50美金比肩DeepSeek把CEO忽悠瘸了,倒霉的却是程序员
· 超详细,DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方Dee