JavaScript監聽屬性改變

admin發表於2018-08-18
JavaScript

關於Mutation Observer基本知識可以參閱以下兩篇文章：

（1）.Mutation Observer優點一章節。

（2）.Mutation Observer用法一章節。

下面通過程式碼例項介紹一下如何監聽attributes的變動，也就是監聽子節點的變動。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload = function () {
  var ul = document.querySelector("ul");
  var Observer = new MutationObserver(function (mutations, instance) {
    console.log(mutations);
    console.log(instance);
    mutations.forEach(function (mutation) {
      console.log(mutation);
    });
  });

  Observer.observe(ul, {
    attributes: true
  });
  ul.setAttribute("class", "a");
    ul.setAttribute("class", "b");
    ul.removeAttribute("class");
}
</script>
</head>
<body>
<div id="box">
  <ul>
    <li>螞蟻部落</li>
  </ul>
</div>
</body>
</html>

下面對程式碼進行一下分析，首先看執行控制檯截圖：

a:3:{s:3:\"pic\";s:43:\"portal/201808/18/013616uv3s3vvev3x3fxs3.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

當其他所有指令碼程式碼都執行完畢之後，MutationObserver建構函式的回撥函式才會被執行。

建構函式的第一個陣列引數用來存放所有的變化，每一個成員都是MutationRecord型別。

[JavaScript] 純文字檢視 複製程式碼
Observer.observe(ul, {
  attributes: true //監聽屬性節點的變化
});

規定監聽器將監聽ul元素屬性節點的變化。

[JavaScript] 純文字檢視 複製程式碼
ul.setAttribute("class", "a")

為ul元素新增一個class屬性，並設定屬性值為a；動作將被記錄在mutations陣列中。

[JavaScript] 純文字檢視 複製程式碼
ul.setAttribute("class", "b")

修改ul元素原來class屬性值為b；動作將被記錄在mutations陣列中。

[JavaScript] 純文字檢視 複製程式碼
ul.removeAttribute("class");

刪除ul元素上的class屬性；動作將被記錄在mutations陣列中。

MutationRecord物件，直接看控制檯截圖：

a:3:{s:3:\"pic\";s:43:\"portal/201808/18/013625ig6w7gljo0lz7p8h.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

監聽指定屬性的改變：

如果不指定監聽哪些屬性，那麼所有屬性的改變都在監聽範圍之內。

Mutation Observer提供了監聽指定屬性的功能，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload = function () {
  var ul = document.querySelector("ul");
  var Observer = new MutationObserver(function (mutations, instance) {
    console.log(mutations);
    console.log(instance);
    mutations.forEach(function (mutation) {
      console.log(mutation);
    });
  });
 
  Observer.observe(ul, {
    attributes: true,
    attributeFilter: ["class"]
  });
  ul.setAttribute("class", "a");
  ul.setAttribute("ant", "b");
}
</script>
</head>
<body>
<div id="box">
  <ul>
    <li>螞蟻部落</li>
  </ul>
</div>
</body>
</html>

上面程式碼只會監聽class屬性的變化。

attributeFilter屬性值是一個陣列，可以規定要監聽的屬性名稱。

相關文章