如果突变是值属性的变化，MutationObserver 不起作用

Question

我在一个页面上有一个表单有多个输入。如果有人通过浏览器控制台（或浏览器扩展或浏览器自动化工具，如 puppeteer）向我的表单添加任何内容，我想处理事件。

例如更改表单中的值的代码，我希望能够在我的

input

元素的值更改时获得一些事件。

let element = document.querySelector('#test');
element.value = 'x';

我希望这段代码会引起一些我可以处理的事件/突变。但没有任何东西被触发。我还没有找到任何触发的事件，属性更改的突变也不起作用。

奇怪的是，当输入值被

element.value = 'x'

改变时，并没有触发突变。但是当使用

setAttribute

时一切正常

element.setAttribute('value', 'x')

我的代码：

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation) {
      console.log('Mutation happened');
      let observer = document.querySelector('#observer');
      observer.value = 'Mutation happened';
    }
  });
});

let element = document.querySelector('#test');

observer.observe(element, { attributes: true });

//Setting value by using setAttribute API causes mutation
//element.setAttribute('value', 'a');

//Setting value by using `.value` API does not cause mutation
element.value = 'b';

Input field: <input id='test' onInput='console.log(1)'/><br/>
Does mutation happen? <input id='observer' value='Mutation did not happen'/>

如何通过 Javascript 代码捕捉 HTML 输入值的变化？ 应该没有必要

MutationObserver

。任何选项都可以。