当此跨度值更改时，如何触发事件？答案

【问题标题】：How can I trigger an event when this span value changes?当此跨度值更改时，如何触发事件？
【发布时间】：2015-11-07 16:33:48
【问题描述】：

当当前页面的股票价格发生变化时，我正在尝试获取控制台日志。

页面： https://www.google.com/finance?q=NASDAQ%3AGOOG&ei=yvbRVbHSCcKgmAGyu7CoDA

元素 ID： #price-panel > div > 跨度 > 跨度

尝试 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”，这对 google 搜索来说是模棱两可的，所以没有多大帮助。

我可以观察什么事件来了解这个元素何时发生变化？

【问题讨论】：

span 元素没有onchange 事件...您可以使用间隔并每分钟进行一次比较。
不确定你是否在寻找类似Detect changes in the DOM的东西。

标签： javascript jquery html google-finance

【解决方案1】：

来自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);

&lt;span id="test"&gt;This is a span&lt;/span&gt;

【讨论】：

【解决方案2】：

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 */);

【讨论】：