一、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元素的宽高时,数值一直在整数和小数之间跳动,会多次触发。

posted on   ygunoil  阅读(5369)  评论(0编辑  收藏  举报
编辑推荐:
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
阅读排行:
· 本地部署 DeepSeek:小白也能轻松搞定!
· 如何给本地部署的DeepSeek投喂数据,让他更懂你
· 从 Windows Forms 到微服务的经验教训
· 李飞飞的50美金比肩DeepSeek把CEO忽悠瘸了,倒霉的却是程序员
· 超详细,DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方Dee
< 2025年2月 >
26 27 28 29 30 31 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 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示