javascript - 在 标签内更改值时调用函数

Question

当段落标记的值发生变化时，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”)。类似于检查段落值变化的连续函数。

Answer 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>