在 <p> 标签内改变值时调用函数答案

【问题标题】：call function on change of value inside <p> tag在 <p> 标签内改变值时调用函数
【发布时间】：2017-09-06 22:41:18
【问题描述】：

在 JavaScript 中有什么方法可以在段落标记的值发生更改时调用函数。

概览：

HTML：

<p id="timer">00:00</p>
<button onclick="change()">My Button</button>

JS：

function change() {
  document.getElementById("timer").innerHTML = "00:01";
}

function hello() {
  alert("Hello");
}

我想在段落的值更改时发出警报（“Hello”）。类似于检查段落值变化的连续函数。

【问题讨论】：

你为什么不能直接从change(); 打电话给hello();？
@b85411 我认为“change();”只是作为 DOM 编辑的一个示例。
hacks.mozilla.org/2012/05/… 和 developer.mozilla.org/en/docs/Web/API/MutationObserver
其实这个段落有一个计时器，我想在它变成00:00时调用一个函数，为了说明问题，我添加了另一个按钮:)
@Ringo，是的，这可能是一个选项。但我想发现一些替代方法:)

标签： javascript html

【解决方案1】：

您可以将MutationObserver 与characterData 选项设置为true 一起使用

<script>
  function change() {
    document.getElementById("timer").innerHTML = "00:01";
  }

  function hello() {
    alert("Hello");
  }
  window.onload = function() {

    var target = document.querySelector("p");

    var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        hello()
      });
    });

    var config = {
      childList: true,
      subtree: true,
      characterData: true
    };

    observer.observe(target, config);
  }
</script>

<p id="timer">00:00</p>
<button onclick="change()">My Button</button>

【讨论】：

【解决方案2】：

试试这个 MutationObserver API，（也检查这个simple example）

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        //value changed, call the other API
        hello();
    });    
});
var observerConfig = {
    characterData: true //since only the node-value needs to be checked in your case
}; 
var targetNode = document.getElementById("timer");
observer.observe(targetNode, observerConfig);

演示

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    //value changed, call the other API
    if ( mutation.type="childList" )
    {
       hello();
       //observer.disconnect();
    }
  });
});
var observerConfig = {
	childList: true
};
var targetNode = document.body;
observer.observe(targetNode, observerConfig);


document.getElementById("timer").innerHTML = "0.2";

window.hello = function (){
  alert(1);
}

&lt;p id="timer"&gt;0.0&lt;/p&gt;

【讨论】：

【解决方案3】：

另一种选择

function change() {
  document.getElementById("timer").innerHTML = new Date().getTime();
}

var prevValue = document.getElementById("timer").innerHTML;

setInterval(function() {

  currValue = document.getElementById("timer").innerHTML;

  if (prevValue != currValue) {
    prevValue = currValue;
    hello();

  }

}, 1);

function hello() {
  alert("Hello");
}

<p id="timer">00:00</p>
<button onclick="change()">My Button</button>

【讨论】：

【解决方案4】：

试试 onchange 属性，或者这个可以帮助你：

Add event handler to HTML element using javascript

【讨论】：

w3schools.com/jsref/event_onchange.asp P 标签不支持更改事件
我说也许这个可以帮助你或其他链接！
@Tesla，感谢您的分享，但我正在寻找类似 MutationObserver 的东西。干杯:)