JavaScript 监听元素值变化的两种方法

在 JavaScript 中监听元素值变化可以通过以下方式实现：

使用 MutationObserver API

MutationObserver API 是一个用于监视 DOM 树变化的 API，它可以监听 DOM 树上的节点增加、删除、属性变化等事件。我们可以创建一个 MutationObserver 实例，然后将它绑定到要监听的元素上，当元素的值发生变化时，就会触发 MutationObserver 的回调函数。

示例代码：

// 监听元素 id 为 example 的 value 属性变化
let target = document.querySelector('#example');
let observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type === 'attributes' && mutation.attributeName === 'value') {
      console.log('value changed to: ' + mutation.target.value);
    }
  });
});
observ er.observe(target, { attributes: true });

使用事件监听器

对于一些表单元素，例如 input 和 textarea，我们可以使用事件监听器来监听它们的值变化。我们可以使用 addEventListener 方法来为元素绑定 input 事件或 change 事件，当元素的值发生变化时，就会触发相应的事件处理函数。

示例代码：

// 监听 id 为 example 的 input 元素的值变化
let input = document.querySelector('#example');
input.addEventListener('input', function() {
  console.log('value changed to: ' + input.value);
});

需要注意的是，使用事件监听器只能监听到用户输入产生的值变化，如果是通过 JavaScript 代码修改元素的值，则不会触发相应的事件。此时，可以考虑使用第一种方法：MutationObserver API。