MutationObserver 监听input标签中通过JS改变其value值

structrue

于 2024-03-11 14:52:38 发布

阅读量319

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44741164/article/details/136623615

版权

情形

我遇到的一个需求场景是这样的，有一个input标签，我们如果只对这个input标签增加change事件，那么是无法通过事件监听到JS直接修改value的情况的（如：input.setAttribute(“value”,“789456”)），然后我发现JS中的 Mutation Observer API 用来监视 DOM 变动。
具体的使用可以参考：http://javascript.ruanyifeng.com/dom/mutationobserver.html#toc1

以下仅是我用来监听input的value属性的变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MutationsObserver</title>
</head> 
 
<body>
    <input id="input" type="text" value="123">
    <script>
        let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
        
        const input = document.getElementById('input')
        const options = {
            attributes: true,
            artributeOldValue:false,
            attributeFilter:["value"],
            characterData:true,
            characterDataOldValue:true
        }
        // 创建MutationObserver实例，返回一个观察者对象
        const mutation = new MutationObserver(function(mutationRecoards, observer) {
            // 当元素发生对应的options中包含的变化时，执行代码
            console.log("value改变了,在这里面做操作",)
            console.log(mutationRecoards)
            console.log(observer)
            
        })

        // 对观察者添加需要观察的元素，并设置需要观察元素的哪些方面
        mutation.observe(input, options);
        
        // 模拟两秒后，通过JS的方式改变input中的内容，
        setTimeout(() => {
            input.setAttribute("value","789456")
        }, 2000);

 
       
    </script>
</body>
</html>