recursal/MDN huggingface dataset:
OES\_vertex\_array\_object
==========================

拓展**OES\_vertex\_array\_object**是WebGL API的一部分，它提供了顶点数组对象 (VAOs) 可以用来封装顶点数组的状态。These objects keep pointers to vertex data and provide names for different sets of vertex data.

WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. 更多详细信息，参见 Using Extensions in the WebGL tutorial.

**备注：** **Availability:** 此拓展只在WebGL1中有效。在WebGL2当中，这些功能可以被直接使用，且去掉了前缀 "`OES`"。

常量
--

这个拓展提供了一个新的常量，它可以在`gl.getParameter()` 当中作为一个参数传递：

`ext.VERTEX_ARRAY_BINDING_OES`

当作为`gl.getParameter()`中的`pname`参数传递时，返回一个`WebGLVertexArrayObject` 对象。

函数
--

这个拓展提供了四个新的函数。

`ext.createVertexArrayOES()` (en-US)

创建一个新的 `WebGLVertexArrayObject`。

`ext.deleteVertexArrayOES()` (en-US)

删除一个给定的 `WebGLVertexArrayObject`。

`ext.isVertexArrayOES()` (en-US)

如果参数是一个 `WebGLVertexArrayObject`则返回 `true` 。

`ext.bindVertexArrayOES()` (en-US)

绑定一个给定的`WebGLVertexArrayObject`到缓冲区。

Examples
--------


```js
var oes_vao_ext = gl.getExtension("OES\_vertex\_array\_object");
var vao = oes_vao_ext.createVertexArrayOES();
oes_vao_ext.bindVertexArrayOES(vao);

// ...
// calls to bindBuffer or vertexAttribPointer
// which will be "recorded" in the VAO
// ...
```

Specifications
--------------

| Specification |
| --- |
| WebGL OES\_vertex\_array\_object Khronos Ratified Extension Specification  |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `WebGLRenderingContext.getExtension()`
* `WebGLRenderingContext.vertexAttribPointer()`
* WebGL2 equivalent methods:
    + `WebGL2RenderingContext.createVertexArray()`
    + `WebGL2RenderingContext.deleteVertexArray()` (en-US)
    + `WebGL2RenderingContext.isVertexArray()` (en-US)
    + `WebGL2RenderingContext.bindVertexArray()` (en-US)
HTMLCanvasElement
=================

\*\*`HTMLCanvasElement`\*\*接口提供用于操纵`<canvas>`元素的布局和表示的属性和方法。 \*\*`HTMLCanvasElement`\*\*接口还继承了`HTMLElement`接口的属性和方法。

属性
--

*从其父项`HTMLElement`继承属性。*

`HTMLCanvasElement.height`

是一个正整数，反映了`<canvas>` 元素的`height` HTML 属性，以 CSS 像素表示。如果未指定属性，或者将其设置为无效值（例如负数），则使用默认值 150。

`HTMLCanvasElement.width`

是一个正整数，反映了`<canvas>` 元素的`width` HTML 属性，以 CSS 像素表示。如果未指定属性，或者将其设置为无效值（例如负数），则使用默认值 300。

`HTMLCanvasElement.mozOpaque` 
非标准

已弃用

是反映 `<canvas>`元素的`moz-opaque` 属性的`Boolean`。它让画布知道半透明性是否会成为一个因素。如果画布知道没有透明感，则可以优化绘画性能。仅基于 Mozilla 的浏览器支持此功能，可以使用标准化的`canvas.getContext('2d', { alpha: false })` 代替。

`HTMLCanvasElement.mozPrintCallback`
非标准

是最初为空的函数。Web 内容可以将其设置为 JavaScript 函数，该函数将在打印页面时重新绘制画布时调用。调用时，回调将传递一个实现了MozCanvasPrintState接口的“printState”对象。回调可以从 printState 对象获取要绘制的上下文，然后必须在完成时在其上调用 done() 。 `mozPrintCallback` 的目的是在所使用打印机的分辨率下获得较高分辨率的画布渲染。 请参阅此博客文章。

方法
--

*从其父项`HTMLElement`继承方法。*

`HTMLCanvasElement.captureStream()` 
实验性

返回`CanvasCaptureMediaStream` ，它是对画布表面的实时视频捕获。

`HTMLCanvasElement.getContext()`

返回画布上的绘图上下文；如果不支持上下文 ID，则返回 null。绘图上下文可让你在画布上绘图。调用 getContext 传入`"2d"` 可以返回一个`CanvasRenderingContext2D`对象，也可以传入`"webgl"`（或`"experimental-webgl"`）返回一个`WebGLRenderingContext` 对象。此上下文仅在实现WebGL的浏览器上可用。

`HTMLCanvasElement.toDataURL()`

返回一个数据 URL，该 URL 包含由类型参数指定的格式的图像（默认为`png`）。返回的图像分辨率为 96dpi。

`HTMLCanvasElement.toBlob()`

创建一个`Blob` 对象，表示 canvas 中包含的图像；该文件可以由用户代理决定是否缓存在磁盘上或存储在内存中。

`HTMLCanvasElement.transferControlToOffscreen()` 
实验性

将控制权转移到主线程或辅助线程上的 `OffscreenCanvas`对象。

### 过时的方法

`HTMLCanvasElement.mozGetAsFile()` (en-US) 
非标准

已弃用

返回代表画布中包含的图像的 `File` 对象；该文件是基于内存的文件，具有指定的名称。如果未指定类型，则图像类型为 image/png。

事件
--

使用`addEventListener()`监听这些事件。

`webglcontextcreationerror` (en-US)

如果用户代理无法创建`WebGLRenderingContext` 或`WebGL2RenderingContext` 上下文，则触发该事件。

`webglcontextlost`

如果用户代理检测到与`WebGLRenderingContext` 或`WebGL2RenderingContext` 对象关联的绘图缓冲区已丢失，则触发此事件。

`webglcontextrestored` (en-US)

如果用户代理为`WebGLRenderingContext` 或`WebGL2RenderingContext` 对象恢复绘图缓冲区，则触发该事件。

规范
--

| Specification |
| --- |
| HTML Standard # htmlcanvaselement |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Beacon API
==========

**`Beacon`** API 用于发送异步和非阻塞请求到服务器。这类请求不需要响应。与 `XMLHttpRequest` 或 Fetch API 请求不同，浏览器会保证在页面卸载前，将信标请求初始化并运行完成。

Beacon API 主要的使用场景是将分析数据发送给服务器，如：客户端事件、会话数据等。在过去，网站使用 `XMLHttpRequest` 来做这件事，但是浏览器无法保证在某些情况发送这些请求（如：页面将被卸载）。为了解决这个问题，网站采取了各种各样的技术，例如使用同步请求，但是这样对性能造成了很糟糕的影响。因为信标请求是异步的并且保证发送，所以它们结合了良好的性能特征和可靠性。

如需了解 Beacon API 更多的细节和用例，请参考 `navigator.sendBeacon()` 方法。

**备注：** Beacon API 在 Web Worker 中是不可用的（没有通过 `WorkerNavigator` (en-US) 暴露出来）。

接口
--

Beacon API 定义了一个独立的方法：`navigator.sendBeacon()`。

该方法接受 2 个参数，URL 和要在请求中发送的数据（data）。data 参数是可选的，其类型可以是 `TypedArray`、`DataView`、`Blob`、字符串字面量、普通对象或 `FormData` 对象。如果浏览器成功地将请求排队交付，则该方法返回“`true`”，否则返回“`false`”。

规范
--

| Specification |
| --- |
| Beacon # sendbeacon-method |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 信标标准（Beacon standard）
* 信标 CanIUse 数据
* 通过服务程序拦截信标（Intercepting beacons through service workers）; Ehsan Akhgari; 2015-Apr-08
* https://webkit.org/blog/8821/link-click-analytics-and-privacy/
* 信标实践
PeriodicWave
============

**`PeriodicWave`** 接口定义了一个可用于对 `OscillatorNode`(振荡节点) 的输出进行构造（描述）的周期性波形。

`PeriodicWave` (周期波) 没有输入或输出；它用于调用 `OscillatorNode.setPeriodicWave()` 时定义自定义振荡器。 `PeriodicWave` 自身由 `AudioContext.createPeriodicWave()` (en-US) 创建/返回。

构造函数
----

`PeriodicWave.PeriodicWave()` (en-US)

使用所有属性的默认值创建一个新的 `PeriodicWave` 对象实例。如果你想一开始就建立自定义属性值，请使用 `AudioContext.createPeriodicWave()` (en-US) 工厂方法替代。

属性
--

*None; 而且，`PeriodicWave` 不继承任何属性。*

方法
--

*None; 而且，`PeriodicWave` 继承任何属性。*

例子
--

参见 `BaseAudioContext.createPeriodicWave` 以获取简单的示例代码，其展示了如何创建一个包含简单的正弦波的 `PeriodicWave` 对象。

规格
--

| Specification |
| --- |
| Web Audio API # PeriodicWave |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Using the Web Audio API (en-US)
XMLSerializer
=============

`XMLSerializer`接口提供`serializeToString()` (en-US) 方法来构建一个代表 DOM 树的 XML 字符串。方法
--

`serializeToString()` (en-US)

返回 DOM 子树序列化后的字符串。

`serializeToStream()` 
非标准

已弃用

将指定元素的每个子树按照特定的字符集序列化成字节流。

示例
--

### 把 XML 序列化为字符串

首先，最基本的例子是将整个 document 对象序列化为一个 XML 字符串。


```js
var s = new XMLSerializer();
var d = document;
var str = s.serializeToString(d);
saveXML(str);
```


这里新建了一个 `XMLSerializer` 对象实例，然后将待序列化的 `Document` 对象实例传入返回等价 XML 的 `serializeToString()` (en-US) 方法。

### 向一个基于 XML 的 DOM 对象中

本例使用 {domxref("Element.insertAdjacentHTML()")}} 方法将一个新的 DOM `Node` 插入 基于序列化 `Document` 对象创建的 XML 中。

**备注：** 在真实场景下，你通常应该通过调用 `importNode()` 方法将新节点加入 DOM 中，然后通过调用以下方法将目标节点添加到 DOM 树：

* `Document` 和 `Element` 方法 `append()` (en-US) 和 `prepend()` (en-US)
* `Node.replaceWith()` (en-US) 方法 (替换现有节点)
* `Document.insertAdjacentElement()` 和 `Element.insertAdjacentElement()` 方法。

因为`insertAdjacentHTML()` 的第二个参数是一个字符串而不是 `Node` 节点对象，所以这里先要使用 `XMLSerializer` 将节点转换为字符串。


```js
var inp = document.createElement("input");
var XMLS = new XMLSerializer();
var inp_xmls = XMLS.serializeToString(inp); // 先将一个 DOM 节点转换为字符串。

// 将新建的节点添加到 DOM 中。
document.body.insertAdjacentHTML("afterbegin", inp_xmls);
```


以上代码通过调用 `Document.createElement()` 方法新建一个 {HTMLElement("input")}} 对象 , 然后通过 `serializeToString()` (en-US) 方法将该对象序列化为 XML.

做完以上工作之后，使用 `insertAdjacentHTML()` 方法将 `<input>` 元素加入 DOM.

规范
--

| Specification |
| --- |
| DOM Parsing and Serialization # the-xmlserializer-interface |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Parsing and serializing XML
* `XMLHttpRequest`
* `DOMParser`
Gamepad API
===========

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

**Gamepad API** 可以给予开发者一种简单、统一的方式来识别并响应游戏控制器（手柄）。其中包含了三个接口、两个事件、一个特殊函数，用来响应控制器的连接与断开、获取其他关于控制器的信息以及识别当前是哪个按键或是哪个控制器被按下了。

接口
--

`Gamepad`

表示已连接的游戏控制器。

`GamepadButton`

表示已连接手柄上的一个按键。

`GamepadEvent`

表示与控制器相关的事件的事件对象。

### 实验性 Gamepad 扩展

`GamepadHapticActuator` (en-US)

表示控制器中的硬件，用于向用户提供触觉反馈（如果可用）最常见的是振动硬件。

`GamepadPose`

表示控制器的位置方向（例如，在 3D 空间中的位置和方向）于 WebVR 控制器中。

另请参阅 Gamepad 接口扩展，来获取上方的功能的相关信息。

### 其他接口扩展

#### Navigator

`Navigator.getGamepads()`

于 `Navigator` 对象中的一个扩展。会返回一个 名为`Gamepad` 的数组对象，其中每个数组元素对应一个已连接的控制器。

#### Window 事件

`Window.ongamepadconnected`

表示当控制器连接时（当`gamepadconnected` 事件触发时）运行的处理程序。

`Window.ongamepaddisconnected` (en-US)

表示当控制器断开连接时（当`gamepaddisconnected` (en-US) 事件触发时）运行的处理程序。

教程与指南
-----

* 使用 Gamepad API
* 使用 Gamepad API 实现控制
规范
--

| Specification |
| --- |
| Gamepad # gamepad-interface |
| Gamepad Extensions # partial-gamepad-interface |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* The Gamepad API by Ted Mielczarek and Robert Nyman
* 简单的 API 演示页面 (源码)
TreeWalker
==========

**`TreeWalker`** 对象用于表示文档子树中的节点和它们的位置。

`TreeWalker` 可以使用 `Document.createTreeWalker()` 方法创建。

属性
--

*这个接口不继承任何属性。*

`TreeWalker.root` (en-US) 只读 

返回一个 `Node` ，表示新建 `TreeWalker` 时所声明的根节点。

`TreeWalker.whatToShow` (en-US) 只读 

返回一个 `unsigned long` 类型的常量位掩码，表示需要筛选的`Node` 类型。不匹配的节点会跳过，但其子节点，如果符合条件，则也会被包含。可能的值如下：

| 常量 | 数字值 | 描述 |
| --- | --- | --- |
| `NodeFilter.SHOW_ALL` | `4294967295`（`unsigned long` 类型的最大值） | 显示所有节点。 |
| `NodeFilter.SHOW_ATTRIBUTE` 
已弃用
 | `2` | 显示`Attr`节点，这意味着使用`TreeWalker`访问 `Attr`节点时，需要让这些节点处于遍历的开始位置。这是因为这些节点不是任何节点的后代，并不处于文档树之上。 |
| `NodeFilter.SHOW_CDATA_SECTION` 
已弃用
 | `8` | 显示 `CDATASection`节点。 |
| `NodeFilter.SHOW_COMMENT` | `128` | 显示 `Comment` 节点。 |
| `NodeFilter.SHOW_DOCUMENT` | `256` | 显示 `Document` 节点。 |
| `NodeFilter.SHOW_DOCUMENT_FRAGMENT` | `1024` | 显示 `DocumentFragment` 节点。 |
| `NodeFilter.SHOW_DOCUMENT_TYPE` | `512` | 显示 `DocumentType` 节点。 |
| `NodeFilter.SHOW_ELEMENT` | `1` | 显示 `Element` 节点。 |
| `NodeFilter.SHOW_ENTITY` 
已弃用
 | `32` | 遗留属性，不再可用。 |
| `NodeFilter.SHOW_ENTITY_REFERENCE` 
已弃用
 | `16` | 遗留属性，不再可用。 |
| `NodeFilter.SHOW_NOTATION` 
已弃用
 | `2048` | 遗留属性，不再可用。 |
| `NodeFilter.SHOW_PROCESSING_INSTRUCTION` | `64` | 显示 `ProcessingInstruction` (en-US) 节点。 |
| `NodeFilter.SHOW_TEXT` | `4` | 显示 `Text` (en-US) 节点。 |

`TreeWalker.filter` (en-US) 只读 

返回一个实现 `NodeFilter` 接口的对象，这个对象用来挑选相关的节点。

`TreeWalker.currentNode` (en-US)

返回 `TreeWalker` 当前指向的`Node`。

方法
--

*这个接口不继承任何方法。*

**备注：** 对于 `TreeWalker`，一个节点是否*可见*只取决于 `whatToShow` 和 `filter` 两个参数。（和元素是否在屏幕上可见无关。）

`TreeWalker.parentNode()` (en-US)

移动当前 `Node` 到文档顺序中的第一个“可见”的祖先节点，并返回该节点。如果没有这样的节点，则会返回 null，同时也不会发生移动。

`TreeWalker.firstChild()` (en-US)

移动当前 `Node` 到当前节点的第一个“可见”子节点，并返回该节点。如果没有这样的节点，则会返回 null，同时也不会发生移动。


```html
<!DOCTYPE html>
<html lang="en">
  <head><title>Demo</title>
  <body>
    <div id="container"></div>
  </body>
</html>
```



```js
let walker = document.createTreeWalker(document.body, NodeFilter.SHOW\_ALL);
let node = walker.firstChild(); // nodeName: "#text"
```


但如果我们这样做：


```js
let walker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW\_ELEMENT,
);
let node = walker.firstChild(); // nodeName: "DIV"
```


这同样应用于 `nextSibling()`、`previousSibling()`、`firstChild()` 和 `lastChild()`。

`TreeWalker.lastChild()` (en-US)

移动当前 `Node` 到当前节点的最末一个“可见”子节点，并返回该节点。如果没有这样的节点，则会返回 null，同时也不会发生移动。

`TreeWalker.previousSibling()` (en-US)

移动当前 `Node` 到当前节点的前一个兄弟节点，并返回该节点。如果没有这样的节点，则会返回 null，同时也不会发生移动。

`TreeWalker.nextSibling()` (en-US)

移动当前 `Node` 到当前节点的后一个兄弟节点，并返回该节点。如果没有这样的节点，则会返回 null，同时也不会发生移动。

`TreeWalker.previousNode()` (en-US)

移动当前 `Node` 到文档顺序中前一个节点，并返回该节点。如果没有这样的节点，则会返回 null，同时也不会发生移动。

`TreeWalker.nextNode()` (en-US)

移动当前 `Node` 到文档顺序中下一个节点，并返回该节点。如果没有这样的节点，则会返回 null，同时也不会发生移动。

规范
--

| Specification |
| --- |
| DOM Standard # interface-treewalker |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 构造函数：`Document.createTreeWalker()`。
* 相关接口：`NodeFilter`、`NodeIterator`。
Web Animations API
==================

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

**Web Animations API** 允许同步和定时更改网页的呈现，即 DOM 元素的动画。它通过组合两个模型来实现：时序模型和动画模型。

概念和用法
-----

Web Animations API 为浏览器和开发人员提供了一种用于描述 DOM 元素的动画的通用语言。要获得有关 API 背后的概念以及如何使用它的更多信息，请阅读使用 Web Amimations API。

网页动画接口
------

`Animation`

提供播放控制、动画节点或源的时间轴。可以接受使用`KeyframeEffect.KeyframeEffect` (en-US)构造函数创建的对象作为参数。

`KeyframeEffect` (en-US)

描述动画属性的集合，调用**keyframes**及`Animation Effect Timing Properties`。然后可以使用 `Animation` 构造函数进行播放。

`AnimationTimeline`

表示动画的时间轴。此接口用以定义时间轴功能（继承自`DocumentTimeline` (en-US)和`future timeline`），并且本身不被开发人员访问。

`DocumentTimeline` (en-US)

表示动画时间轴，包括默认的`DocumentTimeline` (en-US)（通过`Document.timeline`访问）。

`AnimationEffectTiming`

包含`KeyframeEffect` (en-US)的`timing`返回的定时属性对象。它从`AnimationEffectTimingReadOnly`继承其属性，但是以非只读形式。

`SharedKeyframeList`

表示可在`KeyframeEffect` (en-US)对象之间共享的关键帧序列。通过使用该对象，多个`KeyframeEffect` (en-US)对象可以重用相同的关键帧，而无需支付多次解析它们的成本。

`AnimationEffectTimingProperties` (en-US)

`Element.animate()`, `KeyframeEffectReadOnly.KeyframeEffectReadOnly()` (en-US)和 `KeyframeEffect.KeyframeEffect()` (en-US)的定时属性对象。

扩展的其他接口
-------

The Web Animations API 向\*\*`document`**和**`element`\*\* 添加了一些新的功能。

### 扩展到 `Document` 的接口

`document.timeline`

`DocumentTimeline` 表示默认文档时间轴

`document.getAnimations()` (en-US)

返回当前对文档中的元素有效的`Animation`对象的数组。

### 扩展到 `Element` 的接口

`Element.animate()`

用于在元素上创建和播放动画的快捷方式。它返回创建的`Animation`对象实例。

Web 动画只读接口
----------

规格中包括以下接口，用于定义在多个其他位置使用的功能。你不会在 Web 开发工作中直接使用这些接口，但他们能帮助库或框架作者了解这些接口如何工作，使他们的库的实现可以更有效，或者浏览器工程师寻找一个比规范提供的内容更容易的参考。

`AnimationEffectTimingReadOnly`

A dictionary object of timing properties, which are inherited by the mutable `AnimationEffectTiming` interface associated with `KeyframeEffect` (en-US).

`AnimationEffectReadOnly` (en-US)

Defines current and future "Animation Effects" like `KeyframeEffect` (en-US), which can be passed to `Animation.Animation` objects for playing, and `KeyframeEffectReadOnly` (en-US) which is used by `KeyframeEffect` (en-US) (inherited by CSS Animations and Transitions).

`KeyframeEffectReadOnly` (en-US)

Describes sets of animatable properties and values that can be played using the `Animation.Animation()` constructor, and which are inherited by `KeyframeEffect` (en-US).

规范
--

| Specification |
| --- |
| Web Animations  |

相关内容
----

* Using the Web Animations API
* Web Animations demos
* Polyfill
* Firefox's current implementation: AreWeAnimatedYet
* Browser support test
crossOriginIsolated
===================

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

**`crossOriginIsolated`** 是 `WindowOrWorkerGlobalScope` 的一个只读属性，返回一个布尔值，该值指示是否可以通过 `Window.postMessage()` 调用发送 `SharedArrayBuffer`。

该值取决于响应中存在的`Cross-Origin-Opener-Policy` (en-US) 和`Cross-Origin-Embedder-Policy` 头。

语法
--
```

var myCrossOriginIsolated = self.crossOriginIsolated; // 或直接 crossOriginIsolated
```

### 类型

布尔类型

示例
--


```js
if (crossOriginIsolated) {
  // post SharedArrayBuffer
} else {
  // Do something else
}
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-crossoriginisolated-dev |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Service Workers (en-US)
* Web Workers
Touch
=====

**`Touch`** 对象表示在触控设备上的触摸点。通常是指手指或者触控笔在触屏设备或者触摸板上的操作。

对象属性 `Touch.radiusX`, `Touch.radiusY`, 和 `Touch.rotationAngle` 表示用户触摸操作所作用的区域，即*触摸区域*。这些属性对于处理类似于手指触摸之类的不精确操作很有帮助。这些属性可以表示出一个尽可能匹配触控区域的椭圆形（例如用户的指尖触控）。 
实验性

**备注：** 以下很多属性的值需要依赖硬件设备去获取，例如，如果设备本身不支持侦测压感，那么 `force` 属性的值将始终是 0，对于 `radiusX` 和 `radiusY` 来说同样可能有这种情况，如果设备认为触点只是一个点而不是一个面，它们始终为 1。

构造函数
----

`Touch()` 
实验性

创建一个 Touch 对象。

属性
--

*这个接口没有父类，不继承任何属性。*

### 基本属性

`Touch.identifier`只读 

此 `Touch` 对象的唯一标识符。一次触摸动作 (例如手指触摸) 在平面上移动的整个过程中，该标识符不变。可以根据它来判断跟踪的是否是同一次触摸过程。

**`Touch.screenX`**只读 

触点相对于屏幕左边缘的 X 坐标。

**`Touch.screenY`**只读 

触点相对于屏幕上边缘的 Y 坐标。

**`Touch.clientX`**只读 

触点相对于可见视区 (visual viewport) 左边缘的 X 坐标。不包括任何滚动偏移。

**`Touch.clientY`**只读 

触点相对于可见视区 (visual viewport) 上边缘的 Y 坐标。不包括任何滚动偏移。

`Touch.pageX`只读 

触点相对于 HTML 文档左边缘的 X 坐标。当存在水平滚动的偏移时，这个值包含了水平滚动的偏移。

`Touch.pageY`只读 

触点相对于 HTML 文档上边缘的 Y 坐标。当存在垂直滚动的偏移时，这个值包含了垂直滚动的偏移。

`Touch.target`只读 

返回触摸点最初接触的 `Element`，即使这个触摸点已经移出那个元素的交互区域。需要注意的是，如果这个元素在触摸过程中被移除，这个事件仍然会指向它，因此这个事件也不会冒泡到 `window` 或 `document` 对象。因此，如果有元素在触摸过程中可能被移除，最佳实践是将触摸事件的监听器绑定到这个元素本身，防止元素被移除后，无法再从它的上一级元素上侦测到从该元素冒泡的事件。

### 触摸区域

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

`Touch.radiusX`只读 
实验性

返回能够包围接触区域的最小椭圆的水平轴 (X 轴) 半径。这个值的单位和 `screenX` 相同\*\*。\*\*

`Touch.radiusY`只读 
实验性

返回能够包围接触区域的最小椭圆的垂直轴 (Y 轴) 半径。这个值的单位和 `screenY` 相同。

`Touch.rotationAngle`只读 
实验性

返回一个角度值，表示上述由`radiusX` 和 `radiusY` 描述的椭圆为了尽可能精确地覆盖用户与平面之间的接触区域而需要顺时针旋转的角度。

`Touch.force`只读 
实验性

返回用户对触摸平面的压力大小，是一个从 0.0(没有压力) 到 1.0(最大压力) 的浮点数。

Methods
-------

*这个接口没有方法，也没有父类，不继承任何方法。*

示例
--

请看 example on the main Touch events article。

规范
--

| Specification |
| --- |
| Touch Events # touch-interface |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

相关链接
----

* Touch events
* `Touch Events Overview`
* `Document.createTouch()` (en-US)
* `Touch`
* `TouchList`
* `TouchEvent`
InputEvent
==========

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

<
**`InputEvent`** 接口用来构造和字符输入相关的事件对象。

构造函数
----

`InputEvent()`

创建一个 `InputEvent` 对象。

属性
--

除继承自 `UIEvent` 和 `Event` 接口的属性外，还有以下属性：

`InputEvent.data` 只读 

返回当前输入的字符串，如果是删除操作，则该值为空字符串。

`InputEvent.isComposing`只读 

返回一个布尔值，表明该事件是在触发 `compositionstart` 事件之后且触发 `compositionend` 事件之前触发的，也就是表明当前输入的字符是输入法的中途输入。

方法
--

除继承自 `UIEvent` 和 `Event` 接口的方法外，没有其他自身方法。

规范
--

| Specification |
| --- |
| Input Events Level 2 # interface-InputEvent |
| UI Events # interface-inputevent |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `beforeinput` 事件
* `input` 事件
BeforeUnloadEvent
=================

**`beforeunload`** 事件触发于 window、document 和它们的资源即将卸载时。

当事件属性 `returnValue` 被赋值为非空字符串时，会弹出一个对话框，让用户确认是否离开页面（示例如下）。否则，事件被静默处理。一些浏览器实现仅在框架或内置框架接收到用户手势或交互时才显示对话框。在 浏览器兼容性 中查看更多信息。

|  |  |
| --- | --- |
| Bubbles | No |
| Cancelable | Yes |
| Target objects | defaultView |
| Interface | `Event` |

示例
--


```js
window.addEventListener("beforeunload", function (event) {
  event.returnValue = "\\o/";
});

//等同于
window.addEventListener("beforeunload", function (event) {
  event.preventDefault();
});
```


基于 Webkit 的浏览器没有遵循该弹窗规范。以下是一个基本跨浏览器运行的例子。


```js
window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\\o/";

  (e || window.event).returnValue = confirmationMessage; //Gecko + IE
  return confirmationMessage; //Webkit, Safari, Chrome etc.
});
```

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `DOMContentLoaded`
* `readystatechange`
* `load`
* `beforeunload`
* `unload`
* 卸载文档 — 提示卸载文档
Houdini API
===========

Houdini 是一组底层 API，它们公开了 CSS 引擎的各个部分，从而使开发人员能够通过加入浏览器渲染引擎的样式和布局过程来扩展 CSS。Houdini 是一组 API，它们使开发人员可以直接访问 CSS 对象模型（CSSOM），使开发人员可以编写浏览器可以解析为 CSS 的代码，从而创建新的 CSS 功能，而无需等待它们在浏览器中本地实现。

Houdini 的优点
-----------

当样式改变时 Houdini 相比 JavaScript.style (en-US) 的方式能够能够更快的解析。浏览器在应用脚本中发现的任何样式更新之前，会对 CSSOM 进行解析——包括布局、绘制和合成过程。此外，对于 JavaScript 样式更新，布局、绘制和复合过程也会重复进行。Houdini 代码不会等待第一个渲染周期完成。相反，它被包含在第一个周期中——创建可渲染的、可理解的样式。Houdini 为在 JavaScript 中使用 CSS 值提供了一个基于对象的 API。

Houdini 的 CSS Typed OM 是一个包含类型和方法的 CSS 对象、并且暴露出了作为 JavaScript 对象的值。比起先前基于字符串的，对 `HTMLElement.style` 进行操作的方案，对 JavaScript 对象进行操作更符合直觉。每个元素和样式表规则都拥有一个样式对应表，该对应表可以通过 `StylePropertyMap` 来获得。

一个 CSS Houdini 的特性就是 Worklet (en-US)。在它的帮助下，你可以通过引入一行 JavaScript 代码来引入配置化的组件，从而创建模块式的 CSS。不依赖任何前置处理器、后置处理器或者 JavaScript 框架。


```js
<script>CSS.paintWorklet.addModule('csscomponent.js');</script>
```


以上添加进的模块包含一个 `registerPaint()` (en-US)函数，这个模块是完全通过可配置的 worklets 来注册的。

这个 CSS `paint()` 函数的参数包括 worklet 的名字，以及其他可选的参数。worklet 同时能够访问元素的自定义属性：它们不需要作为函数参数传递。


```css
li {
  background-image: paint(myComponent, stroke, 10px);
  --hilights: blue;
  --lowlights: green;
}
```


**备注：** 能力越大，责任越大！在 Houdini 的帮助下你能够在 css 中实现你自己的布局、栅格、或者区域特性，但是这么做并不是最佳实践。CSS 工作组已经做了许多努力来确保 CSS 中的每一项特性都能正常运行，覆盖各种边界情况，同时考虑到了安全、隐私，以及可用性方面的表现。如果你要深入使用 Houdini，确保你也把以上这些事项考虑在内！并且先从小处开始，再把你的自定义 Houdini 推向一个富有雄心的项目。

Houdini APIs
------------

在下面，你能够找到一些链接。这些链接指向 Houdini 范围下的 API 的主列表页面，同时链接到一些指导页来帮助你，如果你需要指导如何去使用这些 API。

CSS Parser API

 这是一个更直接地暴露出 CSS 解析器的 API，能够把任意 CSS 类语言解析成为一种中间类型。
 目前还没有该 API 的教程或参考。


CSS Properties and Values API

定义了一个用来注册新的 CSS 属性的 API。通过该 API 注册的属性必须用一种特定的解析语法书写，以定义其类型、继承行为以及初始值。

CSS Properties and Values API reference
CSS Properties and Values API guide (en-US)

CSS Typed OM

该 API 将 CSSOM 字符串转化为有类型意义的 JavaScript。这将对后续的一个重要的表现打下基础。CSS Typed OM 将 CSS 值以类型化处理的 JavaScript 对象的形式暴露出来，以使其表现可以被控制。

CSS Typed OM reference (en-US)
CSS Typed OM guide (en-US)

CSS Layout API

作为一个被设计来提升 CSS 扩展性的 API，该 API 能够让开发者去书写他们自己的布局算法，比如 masonry 或者 line snapping。该 API 目前还没有原生支持。目前还没有该 API 的教程或参考。

CSS Painting API

作为一个被设计来提升 CSS 扩展性的 API，该 API 允许开发者通过 `paint()` 方法书写 JavaScript 函数，以控制绘制元素的背景、边框或者内容区域。

CSS Painting API reference (en-US)
CSS Painting API guide (en-US)

Worklets

该 API 允许脚本独立于 JavaScript 执行环境，运行在渲染流程的各个阶段。Worklets 在概念上很接近于 Web Workers ，它由渲染引擎调用，并扩展了渲染引擎。

Worklets reference (en-US)

其他
--

以下主题你可能会感兴趣，它们可能在你使用 Houdini API 的时候起一些有趣的作用。

Composite Scrolling and Animation

TBD
HTMLFieldSetElement
===================

HTML Field Set Element
----------------------

DOM `fieldset` elements expose the HTMLFieldSetElement (HTMLFieldSetElement) interface, which provides special properties and methods (beyond the regular element object interface they also have available to them by inheritance) for manipulating the layout and presentation of field-set elements.

属性
--

属性继承自其父级 `HTMLElement`。

| 名称 | 类型 | 描述 |
| --- | --- | --- |
| `disabled` | `Boolean` | 读取 HTML 属性 `disabled`,表明用户是否可以操作该控件。 |
| `elements` | `readonly HTMLFormControlsCollection` | The elements belonging to this field set. |
| `form` 只读  | An `HTMLFormControlsCollection` (en-US) or `HTMLCollection` referencing the containing form element, if this element is in a form. If the field set is not a descendant of a form element, then the attribute can be the ID of any form element in the same document it is related to, or the `null` value if none matches. |  |
| `name` | `DOMString` | Reflects the `name` HTML attribute, containing the name of the field set, used for submitting the form. |
| `type` | `readonly DOMString` | 一定为字符串`fieldset`. |
| `validationMessage` | `readonly DOMString` | A localized message that describes the validation constraints that the element does not satisfy (if any). This is the empty string if the element is not a candidate for constraint validation (**willValidate** is false), or it satisfies its constraints. |
| `validity` | `readonly ValidityState` | The validity states that this element is in. |
| `willValidate` | `boolean` | Always false because `fieldset` objects are never candidates for constraint validation. |

方法
--

| 名称 & 参数 | 返回值 | 描述 |
| --- | --- | --- |
| `checkValidity`() | `Boolean` | 如果元素的值没有有效性问题，则返回 `true`，否则返回 `false` 并触发 `invalid` 事件。 |
| `setCustomValidity(in` DOMString `error)` | `void` | 设置一个自定义错误，则该元素将无法通过有效性验证。参数指定的字符串就是在向用户报告错误时显示的消息。如果为空字符串，则清除这个自定义错误。 |
HTMLDetailsElement
==================

**`HTMLDetailsElement`** 接口提供了特殊的属性 (除了常规的 `HTMLElement` 接口之外，它还可以通过继承获得这些属性) 用于操作 `<details>` 元素。

属性
--

*从其父级 `HTMLElement` 继承属性.*

`HTMLDetailsElement.open` (en-US)

是一个 `boolean` (en-US) 反射 `open` HTML 属性，指示是否向用户显示元素的内容 (不包括 `<summary>`)

方法
--

*没有特定的方法；继承其父方法 `HTMLElement`.*

规格
--

* HTML Living Standard
* HTML 5.2 (W3C Proposed Recommendation)
浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

另见
--

* 实现此接口的 HTML 元素： `<details>`