如何在检测到DOM发生变化时自动触发指定JS函数执行

1. 主动绑定交互事件（最常用，适合筛选类场景） #

直接给价格区间滑块、输入框、筛选按钮这类交互控件绑定事件，用户操作时直接触发更新逻辑，不需要监听DOM变化，性能最优：

// 定义DOM节点
const minPriceInput = document.querySelector('#min-price')
const maxPriceInput = document.querySelector('#max-price')
const goodsListWrap = document.querySelector('#goods-list')

// 商品列表更新逻辑
function refreshGoodsList() {
  const min = Number(minPriceInput.value) || 0
  const max = Number(maxPriceInput.value) || 999999
  // 发起请求拿筛选后的商品数据
  fetch(`/api/goods?minPrice=${min}&maxPrice=${max}`)
    .then(res => res.json())
    .then(data => {
      // 仅更新商品列表区域DOM，不刷新整页
      goodsListWrap.innerHTML = data.map(item => `
        <div class="goods-card">
          <p>${item.name}</p>
          <span>¥${item.price}</span>
        </div>
      `).join('')
    })
}

// 绑定值变更事件，操作时自动触发更新
minPriceInput.addEventListener('change', refreshGoodsList)
maxPriceInput.addEventListener('change', refreshGoodsList)

2. 被动监听DOM变更（MutationObserver） #

如果需要感知非用户直接操作导致的页面内容变化，可以用浏览器原生的MutationObserverAPI监听指定节点的变更，自动触发回调：

const observer = new MutationObserver((mutationList) => {
  // 目标DOM发生变更时执行自定义逻辑
  console.log('商品列表已更新')
})

// 配置监听规则：监听子节点增删、内容变更、属性变更
observer.observe(goodsListWrap, {
  childList: true,
  subtree: true,
  characterData: true,
  attributes: true
})

// 不需要监听时可主动断开
// observer.disconnect()

3. 前端框架响应式方案 #

如果用Vue/React等框架开发，直接用框架自带的响应式能力即可，比如Vue中可以用watch监听筛选参数的变化，自动触发请求和视图更新：

import { ref, watch } from 'vue'

const minPrice = ref(0)
const maxPrice = ref(999999)
const goodsList = ref([])

// 监听价格参数变化，自动拉取数据
watch([minPrice, maxPrice], async () => {
  const res = await fetch(`/api/goods?min=${minPrice.value}&max=${maxPrice.value}`)
  goodsList.value = await res.json()
})

模板里直接绑定goodsList，数据变化后框架会自动更新对应DOM，不需要手动操作。

内容的提问来源于stack exchange，提问作者Alex1919