当 <p> 标记中的文本发生更改时，如何检测或触发事件？ [复制]答案

【问题标题】：How can I detect or trigger an event when text in <p> tag is changed? [duplicate]当 <p> 标记中的文本发生更改时，如何检测或触发事件？ [复制]
【发布时间】：2019-04-10 20:01:16
【问题描述】：

我想在<p> 标记内的文本发生更改时触发一个事件。我想使用change()，但我意识到它适用于表单输入元素。

$("#click").click(function() {
  $('p').html("done");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <p> Hello </p>
</div>
<button id="click">click to change</button>

【问题讨论】：

要跟踪 DOM 元素的变化，可以使用MutationObserver。
为什么不在click处理程序中调用你需要的任何东西？
我觉得你可以用这个：$('#test').bind("DOMSubtreeModified",function(){ alert('changed'); });

标签： javascript jquery

【解决方案1】：

您可以使用MutationObserver() 下面是一个演示。

let p = document.querySelector('p')

function changeText(){
  p.textContent = "red";
}


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

var observer = new MutationObserver((list) => {
  console.log(list[0].target.textContent);
});

observer.observe(p, config);

<div>
  <p> Hello </p>
</div>
<button id="click" onclick="changeText()">click to change</button>

【讨论】：

Typescrit 把这个扔给我：'HTMLParagraphElement 类型的参数 | null' 不可分配给“节点”类型的参数。我怎样才能纠正这个问题？显然标签 p 不是节点。
@carl querySelector 实际上返回的是 Node 而不是段落元素。您可以显式输入“p”。