如何检测HTML页面值更新及表单值变更，记录前后值与触发函数？

我来帮你拆解这两个前端需求，结合你给出的代码片段，给你具体的实现思路和代码示例：

针对不同类型的元素，有两种常用的实现方式：

1. 监听元素交互事件（推荐） #

对于表单元素（比如你提供的billing_state下拉框），直接监听change或input事件，就能在值变化时立刻触发检查逻辑。你已经给下拉框绑定了onchange="check_address('billing');"，可以在这个函数里扩展检查，或者额外添加独立的监听：

// 获取目标下拉框元素
const billingState = document.getElementById('billing_state');
// 保存初始值作为对比基准
let prevStateValue = billingState.value;

// 监听change事件
billingState.addEventListener('change', function() {
  const currentValue = this.value;
  if (currentValue !== prevStateValue) {
    console.log('billing_state的值已更新：', prevStateValue, '→', currentValue);
    // 更新基准值，方便下次对比
    prevStateValue = currentValue;
    // 这里可以添加你需要的后续处理逻辑
  }
});

如果是普通文本元素（比如<label>里的内容），可以用MutationObserver监听内容变化：

const targetLabel = document.querySelector('.chkField label[for="billing_state"]');
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.type === 'characterData') {
      console.log('标签内容已更新：', mutation.oldValue, '→', targetLabel.textContent);
    }
  });
});

// 配置监听规则：监听文本变化并保留旧值
observer.observe(targetLabel, { characterData: true, subtree: true, characterDataOldValue: true });

2. 定时轮询（适合无交互更新的场景） #

如果元素的值是通过异步脚本悄悄更新的，没有触发交互事件，可以定时检查值的变化：

const billingState = document.getElementById('billing_state');
let prevStateValue = billingState.value;

// 每隔1秒检查一次，可根据需求调整间隔
setInterval(() => {
  const currentValue = billingState.value;
  if (currentValue !== prevStateValue) {
    console.log('billing_state的值已更新：', prevStateValue, '→', currentValue);
    prevStateValue = currentValue;
  }
}, 1000);

核心思路是保存初始值做对比，监听变化事件记录差异，同时通过事件绑定或函数包装定位触发修改的函数：

步骤1：保存表单元素的初始值 #

给每个表单元素添加自定义属性，存储初始值：

// 假设你的两个表单分别有id：formA和formB
const targetForms = [document.getElementById('formA'), document.getElementById('formB')];

targetForms.forEach(form => {
  // 选中表单内所有可输入元素
  const elements = form.querySelectorAll('input, select, textarea');
  elements.forEach(el => {
    el.dataset.originalValue = el.value;
    el.dataset.currentValue = el.value;
  });
});

步骤2：监听变化并记录前后值 #

给表单绑定统一的事件监听，处理所有元素的变更：

targetForms.forEach(form => {
  form.addEventListener('change', function(e) {
    const targetEl = e.target;
    const oldValue = targetEl.dataset.currentValue;
    const newValue = targetEl.value;

    if (oldValue !== newValue) {
      // 生成结构化的变更记录
      const changeLog = {
        elementId: targetEl.id,
        elementName: targetEl.name,
        oldValue: oldValue,
        newValue: newValue,
        changeTime: new Date().toISOString(),
        // 直接获取元素绑定的触发函数
        triggerFunction: targetEl.getAttribute('onchange') || '未知函数'
      };

      console.log('表单变更记录：', changeLog);
      // 更新当前值，用于下次对比
      targetEl.dataset.currentValue = newValue;
    }
  });
});

步骤3：定位实际修改值的函数 #

如果修改是通过自定义函数（比如你代码里的check_address）触发的，可以通过包装原函数来精准追踪：

// 保存原函数的引用
const originalCheckAddress = window.check_address;
// 包装原函数，添加日志逻辑
window.check_address = function(type) {
  console.log('触发值修改的函数：check_address，参数：', type);
  // 执行原函数的原有逻辑
  originalCheckAddress(type);
  // 额外获取修改后的元素值，补充记录
  const modifiedEl = type === 'billing' ? document.getElementById('billing_state') : null;
  if (modifiedEl) {
    console.log('check_address修改后的值：', modifiedEl.value);
  }
};

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