Question

假设我有这样的跨度

<span id="theSpan"></span>

使用WebKitMutationObserver（我正在开发chrome的扩展，所以不用担心跨浏览器问题），我如何监听跨度内的变化（innerText）？即。当我这样做时，事件应该触发：
的Javascript

$("#theSpan").text('hello world');

HTML

<span id="theSpan">Hello World</span>

Answer 1

您需要创建WebKitMutationObserver个实例，然后使用<span>方法将其附加到observe。代码如下所示：

// find element and create an observer instance
var target = $('#theSpan');
var observer = new WebKitMutationObserver(function(mutations) {
    $('#log').text('input text changed: "' + target.text() + '"');
});
observer.observe(target[0], { childList: true});
//observer.disconnect(); - call this to stop observing

// test case
setInterval(function(){
    target.text('hello world ' + Math.random() + '!!!');
},1000);

不要忘记将真正的DOM对象传递给observer，而不是jQuery对象。工作小提琴here

Answer 2

试试这个：

＆＃13;

var target = document.querySelector('#in1');
var display = document.querySelector('#dsp');
var MO = MutationObserver || WebKitMutationObserver || MozMutationObserver; 
var observer = new MO(function(mutations) {
  var _this = this;
  mutations.forEach(function(mutation) {
    dsp.innerHTML = _this._root.innerText || _this._root.textContent;
  });    
});

var config = { 	//attributes: true, 
								//childList: true, 
                characterData: true, 
                subtree: true 
                };
 
observer.observe(target, config);
observer._root = target;

setInterval(function(){},250);

＆＃13;

div{
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  margin: 0 0 0.75rem 0;
  padding: 0.1rem 0.25rem 0.1rem 0.25rem;
  font-family: sans-serif;
  color: gray;
}

.input{
  border: 1px solid lightblue;
  min-height: 1.25rem;
}
.display{
  border: 1px solid gray;
  background-color: white;
  min-height: 5rem;
}

＆＃13;

<div id="in1" class="input" contenteditable="true"></div>
<div id="dsp" class="display"></div>

＆＃13;

我认为代码是不言自明的。也许有一点需要注意 - 空SetInterval。这是因为MAC OS Safari在其中，我不知道为什么，MutationObserver没有按预期工作，没有SetInterval。您可以使用间隔值，较低的值意味着更具响应性的MO。在其他浏览器（Chrome和Firefox - 在MAC OS上），即使没有SetInterval，也能很好地工作。

如何使用MutationObserver监听对象文本的更改？

2 个答案: