js监听div元素的宽高变化
javascript
发布于 -06-27
一、js监听window变化的方法
1、onsize只能监听window对象的变化
(1)、 window对象原生、jQuery方法
//原生写法window.onsize = function(){console.log("11");}//jquery写法$(window).resize(function(){console.log("22");})
//注意：浏览器窗口大小改变时，这段代码会执行多次，对性能影响大，容易造成浏览器假死。
(2)、实现不管窗口怎么改变，只在停止改变之后才执行代码
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变化可能是一系列的（比如同时改变宽和高），那么这一系列的变化就会产生一个队列，这个队列会作为参数传递给回调函数。
由于浏览器差异。一些版本的浏览器各自支持了构造函数，但是用法一致的。实例化一个观察者，代码如下：
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属性变化
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示例
<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.MozMutationObserverlet 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) returnthis.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>.containerposition relative.resize-elementtransform translate(-50%, -50%)position absolutetop 50%left 50%height 10remwidth 10removerflow hiddenresize bothdisplay blockbox-shadow 0 0 1px 1px #3361D8border-radius 2px</style>
