javascript - 如果 div innerText 发生变化，则触发 JavaScript 事件

Question

我想在 div 的 innerText 更改时发出警报：

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

不起作用，请帮助。

Answer 1

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

使用 DOMCharacterDataModified 检测 innerText 更改事件

Answer 2

代表 OP 发布。

我找到了一个解决方案：

// 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。

Answer 3

该change事件未指定在文本更改的任何时候触发。它仅在 textarea 失去焦点（用户点击或离开）时触发。所以你的事件只会在这种情况发生时触发。

除了用间隔不断检查 textarea 的值之外，没有优雅的方法可以做到这一点（据我所知）。

请注意，在此小提琴中，该change事件仅在 textarea 失去焦点后触发。

有关更多信息，请参阅此答案...

Answer 4

尝试

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