Javascript：mutationobserver 没有警告消息答案

【问题标题】：Javascript: mutationobserver is not alerting messageJavascript：mutationobserver 没有警告消息
【发布时间】：2016-07-10 10:30:21
【问题描述】：

我正在尝试检测元素中的 CSS 属性更改。我在网上搜索，发现MutationObserver javascript API。但在我的测试脚本中，它没有按预期工作（它没有提醒属性名称和属性值）。

var foo = document.getElementById("hideit");

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    alert('mutation.type = ' + mutation.type);

  });

});
observer.observe(foo);
observer.disconnect();

$(function() {
  $("#clickhere").on("click", function() {
    $("#hideit").slideToggle('fase');
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<body>
  <div id="clickhere">click to toggel</div>
  <div id="hideit" style="display:none;">this is the content of the hide/show toggle</div>

</body>

它显示一个 javascript 错误

TypeError: Argument 1 of MutationObserver.observe is not an object.

先谢谢了

【问题讨论】：

标签： javascript mutation-observers

【解决方案1】：

你的代码有两个问题：

observer.observe 的用法不正确。它需要 2 个参数：Node 和 MutationObserverInit。请参阅正确的 API here。
不要在observe 之后立即调用observer.disconnect();。 Disconnect 停止观察。

Working example

【讨论】：

【解决方案2】：

在实际加载 DOM 之前执行您的代码...因此，您将一个空值/未定义值传递给 observe 方法。

把你的代码包进去：

$( document ).ready(function() {
....
})

同时调用 disconnect 将阻止它接收任何事件。所以你不应该在调用observe 之后立即调用disconnect。而且您缺少observe 调用的参数。

在这里查看一个工作示例：

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver#Example_usage

【讨论】：