且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

当该跨度值更改时,如何触发事件?

更新时间:2023-02-12 11:24:10

来自 Dom事件尝试收听< span> 中的文本更改,则可以使用 DOMCharacterDataModified .

From Dom Events as your try to listen to text changes in <span> you may be able to use DOMCharacterDataModified.

或者您可以使用 MutationObserver 来捕获变化.

Or you can use MutationObserver to capture the changes.

var span = document.querySelector('#test');
var text = document.createTextNode('tttt');

// This may be deprecated.
span.addEventListener('DOMCharacterDataModified', function() {
    alert('span text changed to: ' + this.innerHTML);
});

// You may use MutationObserver instead.
var mutateObserver = new MutationObserver(function(records) {
  console.log(records);
});
mutateObserver.observe(span, {
  childList: true,                                 // capture child add/remove on target element.
  characterData: true,                     // capture text changes on target element
  subtree: true,                                   // capture childs changes too
  characterDataOldValue: true  // keep of prev value
});

setTimeout(function() {
  span.innerHTML ='SSSS';
}, 2000);

setTimeout(function() {
  span.appendChild(text);
}, 3000);

setTimeout(function() {
  text.data = '3123';
}, 4000);

<span id="test">This is a span</span>