Question

我想在div的内部文字发生变化时发出警告：

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

不起作用，请帮忙。

Answer 1

代表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();

}

这是also a JS Fiddle。

Answer 2

未指定change事件在文本更改的任何位置触发。它仅在textarea失去焦点时触发（用户单击或远离标签）。因此，只有在发生这种情况时才会触发您的事件。

除了用interval不断检查textarea的值之外，没有优雅的方法（据我所知）。

请注意this fiddle change事件仅在textarea失去焦点后触发。

有关详细信息，请参阅this answer

Answer 3

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

使用DOMCharacterDataModified来检测内部文本更改事件

Answer 4

尝试

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

如果div innerText发生更改，则触发JavaScript事件

4 个答案: