Mutation Observer API和事件

一概述

Mutation Observer API 用来监视 DOM 变动

它等待所有脚本任务完成后，才会运行（即异步触发方式）。
它把 DOM 变动记录封装成一个数组进行处理，而不是一条条个别处理 DOM 变动。
它既可以观察 DOM 的所有类型变动，也可以指定只观察某一类变动。

使用MutationObserver构造函数，新建一个观察器实例，同时指定这个实例的回调函数。

var observer = new MutationObserver(function (mutations, observer) {
  mutations.forEach(function(mutation) {
    console.log(mutation);
  });
});

该回调函数接受两个参数，第一个是变动数组，第二个是观察器实例

二、方法

observe()
observe()方法用来启动监听，它接受两个参数。

第一个参数：所要观察的 DOM 节点
第二个参数：一个配置对象，指定所要观察的特定变动

观察器所能观察的 DOM 变动类型（即上面代码的options对象），有以下几种。

childList：子节点的变动（指新增，删除或者更改）。
attributes：属性的变动。
characterData：节点内容或节点文本的变动

disconnect()方法用来停止观察
takeRecords()方法用来清除变动记录

DOM 每次发生变化，就会生成一条变动记录（MutationRecord 实例）。该实例包含了与变动相关的所有信息。Mutation Observer 处理的就是一个个MutationRecord实例所组成的数组。

取代 DOMContentLoaded 事件

三、事件

DOM 节点的事件操作（监听和触发），都定义在EventTarget接口
提供三个实例方法
addEventListener()：绑定事件的监听函数
removeEventListener()：移除事件的监听函数
dispatchEvent()：触发事件