如果 div 的 innerText 发生变化，如何触发 JavaScript 事件

Question

我希望能在div的innerText发生变化时弹出提示框。

myDiv.addEventListener("change", function() {
    if (myDiv.innerText != "some text")
        alert('innerText has changed.');
},false);

无法正常工作。

- user3746998

---

可能是重复的问题：Jquery事件：检测div的html/text更改，https://dev59.com/om445IYBdhLWcg3wNXk_ - Nivas

纯JS不可能吗？ - user3746998

谢谢大家，但主题标题是：“Javascript”。 - user3746998

这个 div，它是可编辑内容还是普通的 div？ - Teemu

为什么不将innerText存储在变量中，然后测试它是否与变量不同？或者这是在textField中，您想要在他们输入时检查。 - Josh

Answer 1

myDiv.addEventListener("DOMCharacterDataModified", function (event) { // ... add your code here }, false);

使用DOMCharacterDataModified来检测innerText的变化事件。

- Vishal choudhary

---

根据W3C的规定，已经弃用了Mutation Events，而是采用了MutationObserver。因此，该规范描述了突变事件以供参考和完整性，但不建议使用MutationEvent接口。 - HudsonGraeme

Answer 2

代表发帖人发布：

我替发帖人发布。

我找到了解决方案：

// THIRD FUNCTION (changes the text)
var i = 0;
function thirdFUN(){
    i++;
    var popo = document.getElementById('myDiv');
    popo.innerText = i;
}
setInterval(thirdFUN, 500);

//---------------------------------------------------------------

// JQUERY
/*var popo = $('#myDiv');
$('#myDiv').bind("DOMSubtreeModified",function(){
    if (popo.html() == "10")
    console.log('changed');
});
*/

//---------------------------------------------------------------

// PURE JS
window.onload = function(){

var popo = document.querySelector('#myDiv');

var observer = new MutationObserver(function(mutations){
    mutations.forEach(function(mutation){
        console.log(mutation.type); // <- It always detects changes
        if (popo.innerHTML == "10"){
            alert('hello');
        }
    });    
});

var config = {characterData: true, subtree: true};
observer.observe(popo, config);
//observer.disconnect();

}

这是一个JS Fiddle，链接在此。

- halfer

---

似乎不再起作用了。 - Akash Jain

@AkashJain：你可能需要发布一个新问题。如果这样做，请展示你目前拥有的代码以及你认为它具体哪里出了问题。 - halfer

实际上，提供链接的JS Fiddle现在已经无法工作了。 - Akash Jain

Answer 3

change事件没有指定在文本更改时的任何时间点触发。它仅在文本区域失去焦点（用户单击或切换）时触发。因此，只有在这种情况下才会触发您的事件。

除了使用interval不断检查文本区域的值之外，我不知道还有什么优雅的方法可以做到这一点。

请注意，在this fiddle中，change事件仅在文本区域失去焦点后才会触发。

有关更多信息，请参见this answer...

- shennan

Answer 4

由于声望不够，无法对顶部答案进行评论，但根据 MDN 的说法，变异事件（包括 DOMCharacterDataModified）已被弃用，不应再使用。幸运的是，现在可以使用变异观察器来实现相同的功能。

- Adam

---

请问您能否分享一些使用Mutation Observers的示例代码？ - Raj Dave

Answer 5

尝试

document.addEventListener("change", function() ......

- FuzZ63