gpt4 book ai didi

javascript - native HTMLElement 属性观察器

转载 作者:行者123 更新时间:2023-11-27 23:15:35 27 4
gpt4 key购买 nike

希望你们一切都好!我有一个小问题,也许你们中的很多人已经想过......是否有任何解决方案来监听 native 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 = 'world' 的默认行为;不再起作用,并且字段内的值实际上并未更改...

我想将这个概念应用到其他属性,如“min”、“max”、“placeholder”等...

总而言之,我只想观察一些属性而不改变它们的任何默认行为......

有什么想法吗?

提前谢谢大家!

干杯!

最佳答案

你需要获得原生 property descriptor第一的。你可以从元素的原型(prototype)中得到一个。

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

然后您可以在您的 setter 和 getter 中使用它来反射(reflect) native 行为

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');

关于javascript - native HTMLElement 属性观察器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43349975/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com