当该跨度值更改时，如何触发事件?

本文介绍了当该跨度值更改时，如何触发事件?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

I'm trying to get a console log when the price of the current page's stock changes.

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

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

Element 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表示javascript是"google api"，与google搜索有歧义，因此并没有太大帮助.

builtwith says the javascript is the "google api" which is ambiguous to google searches so that didn't help much.

该元素更改时，我可以观看什么事件来找出?

What event can I watch to find out when this element is change?

推荐答案

来自 Dom事件尝试收听< span> 中的文本更改，则可以使用 DOMCharacterDataModified .

From Dom Events as your try to listen to text changes in <span> you may be able to use DOMCharacterDataModified.

或者您可以使用 MutationObserver 来捕获变化.

Or you can use MutationObserver to capture the changes.

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>