js怎么监听div元素的resize

向右看齐 2022-05-17 05:05 288阅读 0赞

在实现一个项目需求的时候，需要监听到某个div元素的宽高变化，第一时间想到的是resize事件，但是很不幸运的是，resize事件只能加在window对象上，并不能监听具体某个DOM元素。

多方查阅之后，了解到MutationObserver，这是一个可以用来监听整个DOM中任何变化的东西，可以把它理解为一个类，实例化之后调用类实例的几个简单接口即可完成监听，以下具体介绍。

一、MutationObserver介绍

１．构造函数为window.MutationObserver，参数为一个回调函数。

监控到DOM中的改变并且等待一系列改变结束后就会触发回调函数。它与事件的不同之处在于，它在DOM变化时，会记录每一个DOM的变化（为一个MutationRecord对象），但是到DOM变化结束时触发回调。DOM变化可能是一系列的（比如元素的宽和高同时改变），那么这一系列的变化就会产生一个队列，这个队列会作为参数传递给回调函数。

由于浏览器差异的原因，一些版本的浏览器各自支持了构造函数，但是用法都是一样的，实例化一个观察者的代码如下：

let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
    let observer = new MutationObserver(callback)

２．调用接口开始监控DOM。

常用的接口有三个：

①observe(element, options)　配置`MutationObserver`在DOM更改匹配给定选项时，通过其回调函数开始接收通知。

element即要监听的DOM元素，options为监听选项对象，可选的选项如下：

<table>  MutationObserver监听选项  
 <thead> 
  <tr> 
   <th style="width:108px;">选项</th> 
   <th style="width:92px;">取值</th> 
   <th style="width:557px;">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="width:108px;">childList</td> 
   <td style="width:92px;">true/false</td> 
   <td style="width:557px;">设置为true表示监听指定元素的子元素的变动</td> 
  </tr> 
  <tr> 
   <td style="width:108px;">attributes</td> 
   <td style="width:92px;">true/false</td> 
   <td style="width:557px;">设置为true表示监听指定元素的属性的变动</td> 
  </tr> 
  <tr> 
   <td style="width:108px;">characterData</td> 
   <td style="width:92px;">true/false</td> 
   <td style="width:557px;">设置为true表示监听指定元素的data变动</td> 
  </tr> 
  <tr> 
   <td style="width:108px;">subtree</td> 
   <td style="width:92px;">true/false</td> 
   <td style="width:557px;">设置为true表示不仅监听目标元素也同时监听其子元素变动，不能单独设置此选项，必须至少包含前三个选项中的一个</td> 
  </tr> 
  <tr> 
   <td style="width:108px;">attributeOldValue</td> 
   <td style="width:92px;">true/false</td> 
   <td style="width:557px;">在<code>attributes</code>属性已经设为<code>true的前提下,设置为true则会记录节点旧的属性值到</code>MutationRecord的recordOldValue属性。</td> 
  </tr> 
  <tr> 
   <td style="width:108px;">characterDataOldValue</td> 
   <td style="width:92px;">true/false</td> 
   <td style="width:557px;">在<code>characterData</code>属性已经设为<code>true的前提下，设置为true则会记录节点旧的数据到</code>MutationRecord的recordOldValue属性。</td> 
  </tr> 
  <tr> 
   <td style="width:108px;">attributeFilter</td> 
   <td style="width:92px;">监听的属性数组，比如['style',...]</td> 
   <td style="width:557px;">配置监听数组内的属性变化，数组外的属性变化会被忽略</td> 
  </tr> 
 </tbody> 
</table>

所以监听元素宽高变化，就是监听其style属性变化：

observer.observe(element, { attributes: true, attributeFilter: ['style'], attributeOldValue: true })

这样当元素的style发生改变的时候，就会触发构造函数中传入的callback函数。

②disconnect()  `阻止 MutationObserver` 实例继续接收的通知，直到再次调用其observe方法，该观察者对象包含的回调函数都不会再被调用。

③takeRecords() 从MutationObserver的通知队列中删除所有待处理的通知，并将它们返回到一个MutationRecord对象构成的新数组中。

二、示例

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