当此跨度值发生变化时，如何触发事件？

Question

当当前页面的股票价格发生变化时，我正试图获得一个控制台日志。

页面： https ： //www.google.com/finance？q = NASDAQ％3AGOOG＆ei = yvbRVbHSCcKgmAGyu7CoDA

元素ID： #price-panel> div> span> span

尝试1： 失败

$("#price-panel div span span").onchange = function() { console.log('change')}

尝试2： 失败

document.getElementById('price-panel').children[0].children[0].onchange = function() { console.log('change')}

builtwith.com说javascript是“google api”，谷歌搜索模糊不清，所以没什么用。

我可以观察哪些事件可以找出这个元素何时发生变化？

Answer 1

span元素没有onchange事件。 您可以做的一件事是引入一个循环来定期检查当前内容以及之前保存的内容，如果两者不同，则执行一些操作：

var content = null,
    $element = $("#price-panel div span span");

setInterval(function() {
    var currentText = $element.text();

    if (currentText != content) {
        // A change has happened
        console.log("Change");
        content = currentText;
    }
}, 30000 /* check every 30 seconds */);

Answer 2

从Dom Events尝试收听<span>文本更改时，您可以使用DOMCharacterDataModified 。

或者您可以使用MutationObserver捕获更改。

 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>