Question

希望你们都做得很好！我有一个小问题，也许很多人已经考虑过...... 是否有任何解决方案来侦听本机HTMLElement属性（非属性）更新？我解释一下：

<input type="text" value="hello" />

我希望在代码库中的某些内容时收到通知：

myInput.value = 'world';

我可以知道属性本身已经使用MutationObserver或attributeChangedCallback函数进行了更新，但是当代码库直接通过属性赋值时...

我试过这样的事情：

Object.defineProperty(myInput, 'value', {
   set : (newValue) => {
      console.log('value property updated');
      // I can't do something like this.value = newValue
      // cause it will trigger an infinite loop...
   }
});

问题在于，现在是myInput.value =＆＃39; world的默认行为。不再起作用，并且该字段内的值实际上没有改变......

我想将此概念应用于其他属性，例如＆＃34; min＆＃34;，＆＃34; max＆＃34;，＆＃34;占位符＆＃34;等...

总之，我只想观察一些属性而不改变任何默认行为......

有什么想法吗？

先谢谢你们！

干杯！

Answer 1

您需要先获得原生property descriptor。你可以从element的原型中获得一个。

const nativeValueDesc = Object.getOwnPropertyDescriptor(input.constructor.prototype, 'value');

然后，您可以在setter和getter中使用它来反映本机行为

Object.defineProperty(input,'value',{
  set(val){
    console.log('value property updated', val);
    // Continue with native behavior
    return nativeValueDesc.set.call(this, val);
  }
  /* ... */
});

http://jsbin.com/juqili/6/edit?html,js,console,output

的实例

为了能够观察已观察到的元素，或者只是已经提供了自己的描述符的元素，你可以做到

const nativeValueDesc = Object.getOwnPropertyDescriptor(input, 'value') || Object.getOwnPropertyDescriptor(input.constructor.prototype, 'value');

原生HTMLElement属性观察者

1 个答案: