问题：在对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属性传送门：
点这里
问题：在对div设置属性 contenteditable="true" 的时候，由于需要对输入的内容变化进行监听，由于在ie中使用 input、change、propertychange等事件进行监听的时候，无法监听到输入内容的变化，所以这里使用了MutationObserver对象来实现。使用方式如下： //ie下无法监听输入变化，使用下面的方法监听 // 设置obser...
var onload = require ( 'on-load' )
var div = document . createElement ( 'div' )
onload ( div , funct
ion
( el ) {
console . log ( 'in the dom' )
} , funct
ion
( el ) {
console . log ( 'out of the dom' )
// Will fire the onload
document . body . appendChild ( div )
// ... some time later
// Will fire the onunload
document . body . removeChild ( div )
监听失焦（vue）——
<span contenteditable="true" @blur="editnameSet(index, $event)">{{item.name}}</span>
监听实时修改（vue）...
输入框内容变化且失去焦点，触发change事件。
&amp;amp;lt;input type=&amp;quot;text&amp;quot; value=&amp;quot;4545&amp;quot;&amp;amp;gt;
var input = do
文章目录
Mutat
ion
Ob
server
简介
Mutat
ion
Ob
server
的
使用
Mutat
ion
Ob
server
InitattributesattributeOldValueattributeFiltercharacterDatachildList总结与注意注意一参考资料END
Mutat
ion
Ob
server
简介
在某些情况下需要监听DOM元素的属性变化，而这些变化不会触发原生事件，难以监听就...
今天做了一个水印防止消除的需求。我生成水印的方式是通过canvas中生成一张图片放在，body标签的背景图片。防消除用的就是
Mutat
ion
Ob
server
去监听body标签中的属性是否变化，变化就重新生成水印。但是我在chrome浏览器测试取消背景图片这个样式的时候，会一直调用callback函数，这里就有点搞不明白了，希望大神能够解惑。
&lt;html&gt;
&lt;head&gt...
Mutat
ion
Ob
server
可以通过监听DOM
对象
的子节点的变化（childList）、属性的变化（attributes）和后代节点的变化（subtree），当以上内容发生改变时触发回调函数。
实例化
Mutat
ion
Ob
server
const
ob
server
= new
Mutat
ion
Ob
server
(callback)
创建监听
ob
serve
ob
server
.onserve(...
Mutat
ion
Ob
server
示例
https://developer.mozilla.org/zh-CN/docs/Web/API/
Mutat
ion
Ob
server
https://hacks.mozilla.org/2012/05/dom-
mutat
ion
ob
server
-reacting-to-dom-changes-without-killing-browser-performance/
如下是
使用
Mutat
ion
Ob
server
来实现异步调度的 schedule 方法:
简单的给
Mutat
ion
Ob
server
做个测试及总结笔记。
Mutat
ion
Ob
server
，window上的一个(构造)函数，可以通过其创建的观察者(观察
对象
)达到观察DOM的变化的效果。
可适用的需求：开发者在DOM变化过程中的debug、根据页面变化处理不同的资源、拦截网页是否被注入动态内容加载的脚本等等...
简单的案例代码如下，比如观察属性变化：
<button id="J_c...
DOM
Mutat
ion
Ob
server
，在不影响浏览器性能的情况下响应DOM更改。
Dom
Mutat
ion
Events 在提出时的确是一个很不错的想法, 随着web页面的动态性不断增强，web开发者非常欢迎这种能够侦听DOM中的更改并对其作出反应的事件，然而在实践中，DOM
Mutat
ion
Events存在着严重的性能和稳定性问题，所以此方法已被弃用多年。
然而，DOM
Mutat
ion
...
在网页开发中，经常需要监听 DOM 元素的大小变化，以便进行动态布局或其他操作。而 JavaScript 提供了一种方便的方法来实现 DOM 元素大小变化的监听。
首先，要监听 DOM 元素的大小变化，需要知道 DOM 元素的尺寸。获取 DOM 元素的尺寸可以通过其属性和方法来实现。比如，可以通过元素的 clientWidth 和 clientHeight 属性获取其内容区域的宽度和高度。
然后，要监听 DOM 元素大小的变化，可以
使用
Mutat
ion
Ob
server
API。
Mutat
ion
Ob
server
API 是浏览器提供的一种用于监听 DOM 变化的 API，它可以监听 DOM 元素的属性、子节点等变化，并在这些变化发生时触发回调函数。
使用
Mutat
ion
Ob
server
API 监听 DOM 元素大小变化的步骤如下：
1. 创建一个
Mutat
ion
Ob
server
对象
。
2.
使用
Mutat
ion
Ob
server
.
ob
serve 方法监听目标 DOM 元素的变化。
3. 在回调函数中判断 DOM 元素的尺寸是否发生了变化。
4. 如果尺寸发生变化，则进行相应的操作。
例如，以下代码可以实现监听某个元素宽度变化并输出宽度变化的值：
const target = document.querySelector('#target');
const
ob
server
= new
Mutat
ion
Ob
server
((
mutat
ion
s) => {
mutat
ion
s.forEach((
mutat
ion
) => {
if (
mutat
ion
.type === 'attributes' &&
mutat
ion
.attributeName === 'style') {
const width = target.clientWidth;
console.log(`Width changed to ${width}`);
ob
server
.
ob
serve(target, { attributes: true });
最后，需要注意的是，
使用
Mutat
ion
Ob
server
监听 DOM 元素大小的变化虽然方便，但也存在一些限制，例如对于表格的大小变化无法捕获等，需要根据实际情况选择合适的方法来实现 DOM 元素大小的监听。
