MutationObserver对象的使用

最新推荐文章于 2025-04-01 20:01:03 发布

sdj_beyond

最新推荐文章于 2025-04-01 20:01:03 发布

阅读量1.2k

点赞数

分类专栏： javaScript html

本文链接：https://blog.youkuaiyun.com/weixin_38888773/article/details/103147919

版权

javaScript 同时被 2 个专栏收录

16 篇文章

订阅专栏

html

6 篇文章

订阅专栏

在IE中，由于input、change、propertychange事件无法监听contenteditable元素内容变化，本文介绍了如何利用MutationObserver对象解决这个问题。通过指定监听的DOM元素和变化触发的回调函数，实现了对可编辑区域内容变动的监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：在对div设置属性 contenteditable="true" 的时候，由于需要对输入的内容变化进行监听，由于在ie中使用 input、change、propertychange等事件进行监听的时候，无法监听到输入内容的变化，所以这里使用了MutationObserver对象来实现。

使用方式如下：

    //ie下无法监听输入变化，使用下面的方法监听
    // 设置observer的配置选项
    var config = { attributes: true, childList: true, subtree: true,characterData:true };
    // 当节点发生变化时的需要执行的函数
    var callback = (mutationsList, observer) => {
        for(var mutation of mutationsList) {
            if (mutation.type == 'childList') {
                this.changeTxt()
            }
            else if (mutation.type == 'attributes') {
                this.changeTxt()                
            } else if(mutation.type == 'characterData'){
                this.changeTxt()              
            }
        }
    };
    // 创建一个observer示例与回调函数相关联
    var observer = new MutationObserver(callback);
    //使用配置文件对目标节点进行观测
    observer.observe(this.$refs.contentEditor, config);

备注：

1、上面代码里面`this.$refs.contentEditor`是需要监听的dom元素，根据实际监听对象来修改。

2、`this.changeTxt()`是监听到文本变化执行的相应函数，根据实际需求来修改。

MutationObserver属性传送门：点这里