Javascript 观察div中的属性变化

我正试图观察到一个变化

<div id="one" class="elem" data-result="inr"></div>

此分区中的数据结果属性

大多数较旧的方法似乎都被贬低了。我意识到变异观察者是最好的方法。我自己写了一篇没有用的文章。我找到了相似的答案

有了这个，我正试图解决我面临的问题

我创建了它，它能够检测输入更改（使用$（document）.on），但不能检测数据结果属性的更改

我试过两种方法。。。（1）

（'body'）.attrchange

（2）

$（文档）.on（'attrchange'，…）

我不知道这为什么不起作用。（我对js和jquery也很陌生，通过编码学习）

---

编辑：我找到了一个类似的，完全符合我想要的。我正在做类似的事情，但我想我犯了一些小错误。

我发现代码有问题

似乎没有识别使用所做的更改

$("element").data("result",$(this).val());

它检测到

$("element").attr("data-result",$(this).val());

---

我已经添加了工作。

我正在寻找相同的解决方案，但不想使用任何第三方库。 在谷歌和这个网站上挖掘了一些信息后，我在上找到了解决方案

//每1000毫秒更改图像src的代码。
计数=0；
setInterval（函数（）{
var sourceElement=document.querySelector（'#div1'）；
setAttribute（'data-src'，'something'+count）；
sourceElement.innerHTML='something'+count；
计数++；
}, 2000);
函数startMutationObserver（tNode，c）{
//选择将观察到突变的节点
const targetNode=tNode？tNode：文档；
//观察者选项（要观察哪些突变）
const config=c？c：{
属性：正确，
儿童名单：是的，
子树：真
};
//观察到突变时执行的回调函数
常量回调=函数（mutationsList，observer）{
for（让突变列表突变）{
if（mutation.type==='childList'）{
targetNode.dispatchEvent（新CustomEvent（'newChild'）{
细节：突变
}));
}else if（mutation.type==='attributes'）{
targetNode.dispatchEvent（新的CustomEvent（'attributeChange'）{
细节：突变
}));
}
}
}
//创建链接到回调函数的观察者实例
const observer=新的MutationObserver（回调）；
//开始观察目标节点是否存在已配置的突变
observer.observe（targetNode，config）；
//稍后，你可以停止观察
//observer.disconnect（）；
}
//调用此函数以开始观察DOM元素的更改
STARTMOUTION观察员（文件）；
//用于侦听自定义事件并根据需要筛选自定义事件的代码
document.addEventListener（'attributeChange'，函数（e）{
//控制台日志（e）；
常数ele=e.细节；
if（ele.target.matches（'div[data src]'）和&ele.attributeName=='data src'）{
var src=e.detail.target.getAttribute（'data-src'）；
log（'newsrc='，src）；
}
});

文件
某物
为什么不在更改
数据
属性时使用
触发器
手动引发事件？在JSFIDLE中，我使用一个输入框进行测试。在我的应用程序中，数据结果将使用jQuery进行修改。您可能喜欢此链接-请参阅第一个回答的问题。此链接很有趣。我试图理解并将其添加到我的JSFIDLE中，以查看它是否适用于我的情况。jQuery
data
函数不使用/创建属性。TabVochange插件监听一个元素上DOM属性的变化。欢迎来到这里，只提供链接的答案不能被认为是一个有效的答案，请提供一个示例代码来说明这个问题是如何解决的。@ SaeedZhiany，谢谢你的建议，在答案中也添加了示例代码。