js监听元素值变化

在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);
    }
  });
});
observer.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