JavaScript监听属性改变

参考：https://www.softwhy.com/HTML5/MutationObserver_course/

JavaScript监听属性改变

2018-8-18 01:34| 作者: admin| 查看: 3639| 评论: 0|来自: 蚂蚁部落

原创作品，转载需得到原作者书面许可，同时保留原作者和出处，否则将追究法律责任。

关于Mutation Observer基本知识可以参阅以下两篇文章：

（1）.Mutation Observer优点一章节。

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

下面通过代码实例介绍一下如何监听attributes的变动，也就是监听子节点的变动。

代码实例如下：

[HTML] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!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] 纯文本查看 复制代码
1
2
3
Observer.observe(ul, {
  attributes: true //监听属性节点的变化
});

规定监听器将监听ul元素属性节点的变化。

[JavaScript] 纯文本查看 复制代码
1
ul.setAttribute("class", "a")

为ul元素添加一个class属性，并设置属性值为a；动作将被记录在mutations数组中。

[JavaScript] 纯文本查看 复制代码
1
ul.setAttribute("class", "b")

修改ul元素原来class属性值为b；动作将被记录在mutations数组中。

[JavaScript] 纯文本查看 复制代码
1
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] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!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属性值是一个数组，可以规定要监听的属性名称。

posted @ 2020-07-22 14:19  Bigben  阅读(2617)  评论(0)    收藏  举报