三个好用的ObserverAPI

MutationObserver

MutationObserver 接口提供了监视对 DOM 树所做更改的能力。它被设计为旧的Mutation Events功能的替代品，该功能是 DOM3 Events 规范的一部分。

构造函数 MutationObserver()

创建并返回一个新的 MutationObserver 它会在指定的 DOM 发生变化时被调用。

DOM 规范中的 MutationObserver() 构造函数——是 MutationObserver 接口内容的一部分——创建并返回一个新的观察器，它会在触发指定 DOM 事件时，调用指定的回调函数。MutationObserver 对 DOM 的观察不会立即启动；而必须先调用 observe() 方法来确定，要监听哪一部分的 DOM 以及要响应哪些更改。

语法

var observer = new MutationObserver(callback);

参数

callback

一个回调函数，每当被指定的节点或子树以及配置项有 DOM 变动时会被调用。回调函数拥有两个参数：一个是描述所有被触发改动的 MutationRecord 对象数组，另一个是调用该函数的 MutationObserver 对象。

返回值

一个新的、包含监听 DOM 变化回调函数的 MutationObserver 对象。

方法

disconnect()

阻止 MutationObserver 实例继续接收的通知，直到再次调用其 observe() 方法，该观察者对象包含的回调函数都不会再被调用。

MutationObserver 的 disconnect() 方法告诉观察者停止观察变动。可以通过调用其 observe() 方法来重用观察者。

语法

mutationObserver.disconnect() //无参数，返回值 undefined

observe()

配置 MutationObserver 在 DOM 更改匹配给定选项时，通过其回调函数开始接收通知。

MutationObserver 的 observe() 方法配置了 MutationObserver 对象的回调方法以开始接收与给定选项匹配的 DOM 变化的通知。根据配置，观察者会观察 DOM 树中的单个 Node，也可能会观察被指定节点的部分或者所有的子孙节点。

要停止 MutationObserver（以便不再触发它的回调方法），需要调用 MutationObserver.disconnect() 方法。

语法

mutationObserver.observe(target[, options])

参数

target
DOM 树中的一个要观察变化的 DOM Node (可能是一个 Element)，或者是被观察的子节点树的根节点。

options
此对象的配置项描述了 DOM 的哪些变化应该报告给 MutationObserver 的 callback。当调用 observe() 时，childList、attributes 和 characterData 中，必须有一个参数为 true。否则会抛出 TypeError 异常。

options 的属性如下：

	subtree 可选
	当为 true 时，将会监听以 target 为根节点的整个子树。包括子树中所有节点的属性，而不仅仅是针对 target。默认值为 false。

	childList 可选
	当为 true 时，监听 target 节点中发生的节点的新增与删除（同时，如果 subtree 为 true，会针对整个子树生效）。默认值为 false。

	attributes 可选
	当为 true 时观察所有监听的节点属性值的变化。默认值为 true，当声明了 attributeFilter 或 attributeOldValue，默认值则为 false。

	attributeFilter 可选
	一个用于声明哪些属性名会被监听的数组。如果不声明该属性，所有属性的变化都将触发通知。

	attributeOldValue 可选
	当为 true 时，记录上一次被监听的节点的属性变化；可查阅监听属性值了解关于观察属性变化和属性值记录的详情。默认值为 false。

	characterData 可选
	当为 true 时，监听声明的 target 节点上所有字符的变化。默认值为 true，如果声明了 characterDataOldValue，默认值则为 false

	characterDataOldValue 可选
	当为 true 时，记录前一个被监听的节点中发生的文本变化。默认值为 false

返回值 undefined

takeRecords()

从 MutationObserver 的通知队列中删除所有待处理的通知，并将它们返回到 MutationRecord 对象的新 Array 中。

示例或者兼容说明查阅MDN

跳伞

ResizeObserver

ResizeObserver 接口监视 Element 内容盒或边框盒或者 SVGElement 边界尺寸的变化。

备注： 内容盒是盒模型放置内容的部分，这意味着边框盒减去内边距和边框的宽度就是内容盒。边框盒包含内容、内边距和边框

ResizeObserver 避免了通过回调函数调整大小时，通常创建的无限回调循环和循环依赖项。它只能通过在后续的帧中处理 DOM 中更深层次的元素来做到这一点。如果它的实现遵循规范，则应在绘制前和布局后调用 resize 事件。

构造函数

ResizeObserver()

创建并返回一个新的 ResizeObserver 对象。无属性

ResizeObserver 构造函数创建一个新的 ResizeObserver 对象，它可以用于监听 Element 内容盒或边框盒或者 SVGElement 边界尺寸的大小。

语法

new ResizeObserver(callback)

参数

callback(entries,observer)

每当观测的元素调整大小时，调用该函数。该函数接收两个参数：

entries

一个 ResizeObserverEntry 对象数组，可以用于获取每个元素改变后的新尺寸。

observer

对 ResizeObserver 自身的引用，因此需要它的时候，你要从回调函数的内部访问。例如，这可用于在达到特定的情况时，自动取消对观察者的监听，但如果你不需要它，可以省略它

方法

ResizeObserver.disconnect()

取消特定观察者目标上所有对 Element 的监听。

ResizeObserver 接口的 disconnect() 方法取消所有的对 Element 或 SVGElement 目标的监听。

语法

disconnect() //无参数，无返回（undefined）

ResizeObserver.observe()

开始对指定 Element 的监听。

ResizeObserver 接口的 observe() 方法用于监听指定的 Element 或 SVGElement。

语法

observe(target)
observe(target, options)

参数

target

对要监听的 Element 或 SVGElement 的引用。

options 可选

一个可选的对象，允许你为监听的对象设置参数。目前，这只有一个参数：

box

设置 observer 将监听的盒模型。可能的值是：

content-box（默认）
	CSS 中定义的内容区域的大小。

border-box
	CSS 中定义的边框区域的大小。

device-pixel-content-box
	在对元素或其祖先应用任何 CSS 转换之前，CSS 中定义的内容区域的大小，以设备像素为单位。

返回值

无（undefined）

ResizeObserver.unobserve()

结束对指定 Element 的监听。

ResizeObserver 接口的 unobserve() 方法结束对指定的 Element 或 SVGElement 的监听。

语法

unobserve(target)

参数

target

对不要监听的 Element 或 SVGElement 的引用。

返回值

无（undefined）

示例或者兼容说明查阅MDN

跳伞

IntersectionObserver

IntersectionObserver 接口（从属于 Intersection Observer API）提供了一种异步观察目标元素与其祖先元素或顶级文档视口（viewport）交叉状态的方法。其祖先元素或视口被称为根（root）。

当一个 IntersectionObserver 对象被创建时，其被配置为监听根中一段给定比例的可见区域。一旦 IntersectionObserver 被创建，则无法更改其配置，所以一个给定的观察者对象只能用来监听可见区域的特定变化值；然而，你可以在同一个观察者对象中配置监听多个目标元素。

构造函数

IntersectionObserver()

创建一个新的 IntersectionObserver 对象，当其监听到目标元素的可见部分（的比例）超过了一个或多个阈值（threshold）时，会执行指定的回调函数。

**IntersectionObserver()**构造器创建并返回一个IntersectionObserver对象。如果指定rootMargin则会检查其是否符合语法规定，检查阈值以确保全部在 0.0 到 1.0 之间，并且阈值列表会按升序排列。如果阈值列表为空，则默认为一个 [0.0] 的数组。

语法

var observer = new IntersectionObserver(callback[, options]);

参数

callback

当元素可见比例超过指定阈值后，会调用一个回调函数，此回调函数接受两个参数：

entries

一个IntersectionObserverEntry对象的数组，每个被触发的阈值，都或多或少与指定阈值有偏差。

observer

被调用的IntersectionObserver实例。

options可选

一个可以用来配置 observer 实例的对象。如果options未指定，observer 实例默认使用文档视口作为 root，并且没有 margin，阈值为 0%（意味着即使一像素的改变都会触发回调函数）。你可以指定以下配置：

root

监听元素的祖先元素Element对象，其边界盒将被视作视口。目标在根的可见区域的任何不可见部分都会被视为不可见。

rootMargin

一个在计算交叉值时添加至根的边界盒 (bounding_box (en-US)) 中的一组偏移量，类型为字符串 (string) ，可以有效的缩小或扩大根的判定范围从而满足计算需要。语法大致和 CSS 中的margin 属性等同;默认值是"0px 0px 0px 0px"。

threshold

规定了一个监听目标与边界盒交叉区域的比例值，可以是一个具体的数值或是一组 0.0 到 1.0 之间的数组。若指定值为 0.0，则意味着监听元素即使与根有 1 像素交叉，此元素也会被视为可见。若指定值为 1.0，则意味着整个元素都在可见范围内时才算可见。

返回值

一个可以使用规定阈值监听目标元素可见部分与root交叉状况的新的IntersectionObserver 实例。调用自身的observe() 方法开始使用规定的阈值监听指定目标。

实例属性

IntersectionObserver.root 只读

测试交叉时，用作边界盒的元素或文档。如果构造函数未传入 root 或其值为null，则默认使用顶级文档的视口

root 属性用来获取当前 intersectionObserver 实例的根元素。

语法

intersectionObserver.root;

IntersectionObserver.rootMargin 只读

计算交叉时添加到根边界盒 (en-US)的矩形偏移量，可以有效的缩小或扩大根的判定范围从而满足计算需要。此属性返回的值可能与调用构造函数时指定的值不同，因此可能需要更改该值，以匹配内部要求。所有的偏移量均可用像素（px）或百分比（%）来表达，默认值为“0px 0px 0px 0px”。

IntersectionObserver 接口的只读属性 rootMargin 是与 CSS 属性margin语法相似的字符串 (string) 对象。在交叉检测开始之前，由rootMargin 规定的矩形的每一边都会被添加至root元素的边框盒 (bounding box (en-US)) 的相应边。例如，这可以让你向外调整边界，使得目标元素被认为是 100% 可见的，即使此元素得一部分长或宽被裁剪，或者在边缘过于靠近根边框盒边界的情况下，将目标视为部分隐藏。

语法

var marginString = IntersectionObserver.rootMargin;

值

一个字符串，形式与 CSS margin属性相似，包含了一条或一组根边框盒边的偏移量。这些偏移量会被添加至根边界盒与目标元素边界的交叉区域之前。

这个属性返回的字符串也许会与IntersectionObserver被配置时所指定的值有所差别。浏览器可以改变这些值。

如果 rootMargin 在对象初始化的时候未被指定，它将被设置成默认值 “0px 0px 0px 0px”，这将意味着在原根节点边界框与目标边界之间计算交叉值。交集的计算描述了 rootMargin 的更加深入的使用方法。

IntersectionObserver.thresholds (en-US) 只读

一个包含阈值的列表，按升序排列，列表中的每个阈值都是监听对象的交叉区域与边界区域的比率。当监听对象的任何阈值被越过时，都会生成一个通知（Notification）。如果构造器未传入值，则默认值为 0。阈值的默认值为 0.0。

IntersectionObserver 接口的只读阈值属性返回交集列表 使用 IntersectionObserver（） 实例化观察者时指定的阈值。如果 实例化对象时仅提供一个阈值比率，这将是一个 包含该单个值的数组。

值

交集阈值的数组，最初在实例化观察者时使用属性指定。如果只有一个观察者 被指定，而不在数组中，此值是一个单条目数组，包含 那个门槛。无论原始数组的顺序如何 在中，这个总是按数字递增的顺序排序。thresholdthreshold

如果在用于实例化观察者时未包含任何选项，则 的值为 。thresholdIntersectionObserver()thresholds[0]

**注意：**尽管在创建 IntersectionObserver 时可以指定的对象具有一个名为 的字段，但此属性称为 。混乱？是的。如果您不小心将 用作 中的字段名称，则数组最终将变成 ，这很可能是 不是你所期望的。调试混乱可能会随之而来。optionsthresholdthresholdsthresholdsoptionsthresholds[0.0]

实例方法

IntersectionObserver.disconnect()

使 IntersectionObserver 对象停止监听目标。

IntersectionObserver 的方法终止对所有目标元素可见性变化的观察。disconnect()

语法

intersectionObserver.disconnect(); // 无参数，无返回（undefined）

IntersectionObserver.observe()

使 IntersectionObserver 开始监听一个目标元素。

IntersectionObserver 对象的observe() 方法向 IntersectionObserver 对象监听的目标集合添加一个元素。一个监听者有一组阈值和一个根，但是可以监视多个目标元素，以查看这些目标元素可见区域的变化。调用IntersectionObserver.unobserve()方法可以停止观察元素

当指定元素的可见区域超过监听者的可见区域阈值之一时（阈值列表IntersectionObserver.thresholds (en-US)），监听者的回调会被传入代表当前发生的交叉变化IntersectionObserverEntry并执行。请注意，这种设计允许通过调用一次回调，给回调传入 IntersectionObserverEntry 对象数组，来实现同时处理多个被监听元素的交叉变化。

语法

IntersectionObserver.observe(targetElement);

参数

targetElement

可见性区域被监控的元素element。 此元素必须是根元素的后代 (如果根元素为视窗，则该元素必须被当前文档包含)。

返回值

无返回（undefined）

IntersectionObserver.takeRecords()

返回所有观察目标的 IntersectionObserverEntry 对象数组。

IntersectionObserver 的方法takeRecords() 返回一个 IntersectionObserverEntry 对象数组，每个对象的目标元素都包含每次相交的信息，可以显式通过调用此方法或隐式地通过观察者的回调自动调用。

备注： 如果使用回调来监视这些更改，则无需调用此方法。调用此方法会清除挂起的相交状态列表，因此不会运行回调。

语法

intersectionObserverEntries = intersectionObserver.takeRecords(); // 无参数

返回值

IntersectionObserverEntry 对象数组，每个对象包含目标元素与根每次的相交信息。

IntersectionObserver.unobserve()

使 IntersectionObserver 停止监听特定目标元素。

IntersectionObserver的unobserve() 方法命令IntersectionObserver停止对一个元素的观察。

语法

IntersectionObserver.unobserve(target); //无返回（undefined）

参数

target

要取消观察的目标，如果没有提供，方法不做任何事情，也不会抛出异常。

示例或者兼容说明查阅MDN

跳伞

个人声明

文章摘抄自MDN，用来作为自己的笔记和分享，纯属的知识搬运工，不作为商业用途