recursal/MDN huggingface dataset:
AnimationEvent
==============

**實驗性質:** **這是一個實驗中的功能 (en-US)**  
此功能在某些瀏覽器尚在開發中，請參考兼容表格以得到不同瀏覽器用的前輟。

摘要
--

**`AnimationEvent`** 介面表現提供動畫 (en-US)相關資訊的事件。

Event

AnimationEvent性能
--

*另外從其父 `Event` 繼承屬性*。

`AnimationEvent.animationName` (en-US) Read only 

是一個`DOMString`包含的值 `animation-name` (en-US) CSS 屬性與過渡有關。

`AnimationEvent.elapsedTime` (en-US) Read only 

是一個`float`給予時間的動畫已經運行，以秒為單位，當該事件燒製，不含動畫被暫停的任何時間量。為一個`"animationstart"`事件，`elapsedTime`是`0.0`，除非有一個負值`animation-delay` (en-US)，在這種情況下，該事件將與燒製`elapsedTime`含有 `(-1 * delay)`。

`AnimationEvent.pseudoElement` (en-US) Read only 

是一個`DOMString`，從`"::"`，包含的名字虛擬元素 (en-US)的動畫運行。如果動畫上不偽元素，但該元素，一個空字符串上運行`：''。`

構造函數
----

`AnimationEvent()` (en-US)

創建一個`AnimationEvent`事件具有給定參數。

方法
--

*同時繼承其父`事件`方法*。

`AnimationEvent.initAnimationEvent()` (en-US) 
非標準

已棄用

初始化`AnimationEvent` 使用過時的創建 `Document.createEvent("AnimationEvent")` 方法。

規範
--

| Specification |
| --- |
| CSS Animations Level 1 # interface-animationevent |

瀏覽器兼容性
------

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

另請參見
----

* 使用 CSS 動畫 (en-US)
* Animation-related CSS properties and at-rules: `animation` (en-US), `animation-delay` (en-US), `animation-direction` (en-US), `animation-duration` (en-US), `animation-fill-mode`, `animation-iteration-count` (en-US), `animation-name` (en-US), `animation-play-state` (en-US), `animation-timing-function` (en-US), `@keyframes` (en-US).
MediaDevices
============

`MediaDevices`介面可以存取連接的媒體輸入設備，像是相機、麥克風，以及螢幕分享。它可以存取任何硬體資源的媒體數據。

EventTarget

MediaDevices屬性
--

*繼承父類`EventTarget`的屬性。*

方法
--

*繼承父類`EventTarget`的方法。*

`enumerateDevices()`

取得一系列關於系統中可用的媒體輸入和媒體輸出設備的資訊。

`getSupportedConstraints()` (en-US)

返回一個符合 `MediaTrackSupportedConstraints` (en-US) 的物件，該物件標示出 `MediaStreamTrack` (en-US) 介面支援哪些可約束的屬性。請參考 Media Streams API (en-US) 瞭解更多關於 `constraints` 的資訊。

`getDisplayMedia()` (en-US)

出現提示視窗讓使用者選擇要捕捉整個螢幕或是部分(例如一個視窗)的畫面做為`MediaStream` (en-US)，用於分享或錄製。返回值為一個解析為`MediaStream` 的 promise。

`getUserMedia()` (en-US)

透過提示視窗獲得使用者的許可後，打開系統上的相機和/或麥克風麥克風，並返回一包含視訊輸入軌道和/或音訊輸入軌道的`MediaStream` (en-US)。

`selectAudioOutput()` (en-US)

出現提示視窗讓使用者選擇特定的音訊輸出設備。

事件
--

`devicechange` (en-US)

在媒體輸入或媒體輸出設備連接上使用者的系統裝置，或是從使用者的系統裝置移除時觸發。

範例
--


```js
"use strict";

// Put variables in global scope to make them available to the browser console.
var video = document.querySelector("video");
var constraints = (window.constraints = {
  audio: false,
  video: true,
});
var errorElement = document.querySelector("#errorMsg");

navigator.mediaDevices
  .getUserMedia(constraints)
  .then(function (stream) {
    var videoTracks = stream.getVideoTracks();
    console.log("Got stream with constraints:", constraints);
    console.log("Using video device: " + videoTracks[0].label);
    stream.onremovetrack = function () {
      console.log("Stream ended");
    };
    window.stream = stream; // make variable available to browser console
    video.srcObject = stream;
  })
  .catch(function (error) {
    if (error.name === "ConstraintNotSatisfiedError") {
      errorMsg(
        "The resolution " +
          constraints.video.width.exact +
          "x" +
          constraints.video.height.exact +
          " px is not supported by your device.",
      );
    } else if (error.name === "PermissionDeniedError") {
      errorMsg(
        "Permissions have not been granted to use your camera and " +
          "microphone, you need to allow the page access to your devices in " +
          "order for the demo to work.",
      );
    }
    errorMsg("getUserMedia error: " + error.name, error);
  });

function errorMsg(msg, error) {
  errorElement.innerHTML += "<p>" + msg + "</p>";
  if (typeof error !== "undefined") {
    console.error(error);
  }
}
```

規範
--

| Specification |
| --- |
| Media Capture and Streams # mediadevices |

瀏覽器兼容性
------

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

參見
--

* Media Capture and Streams API: The API this interface is part of.
* Screen Capture API (en-US): The API defining the `getDisplayMedia()` (en-US) method.
* WebRTC API (en-US)
* `Navigator.mediaDevices` (en-US): Returns a reference to a `MediaDevices` object that can be used to access devices.
* CameraCaptureJS: HTML5 video capture and playback using `MediaDevices` and the MediaStream Recording API (source on GitHub)
* OpenLang: HTML5 video language lab web application using `MediaDevices` and the MediaStream Recording API for video recording (source on GitHub)
IndexedDB
=========

**實驗性質:** **這是一個實驗中的功能 (en-US)**  
此功能在某些瀏覽器尚在開發中，請參考兼容表格以得到不同瀏覽器用的前輟。

IndexedDB 為用戶端的儲存用 API，可用於大量的結構化資料，並透過索引功能而高效率搜尋資料。DOM Storage (en-US) 適合儲存較少量的資料；IndexedDB 則適合大量結構化資料的儲存方案。

本篇文章僅為 API 物件的入門技術說明。若需進一步了解，則請參閱 IndexedDB 基本概念。更多細節則可參閱使用 IndexedDB。

IndexedDB 提供不同 APIs 用於同步與非同步的存取作業。同步 API 僅能用於Web Workers (en-US) 之中，但尚未有瀏覽器支援同步 API。非同步 API 則用於 Web Workers 內外均可，但 Firefox 目前尚未建構。

非同步 API
-------

非同步 API 不會阻塞呼叫它的執行緒。若要非同步存取資料庫，可於 window (en-US) 物件的 indexedDB 屬性上呼叫 open (en-US)()。此函式將回傳 IDBRequest 物件 (IDBOpenDBRequest)，開始非同步存取資料庫；呼叫端程式利用 IDBRequest 物件上的事件來進行非同步溝通。

**備註：** 在舊版瀏覽器 (Gecko 16 版之前的 indexedDB 屬性；Chrome 中的 webkitIndexedDB；IE 10 中的 msIndexedDB) 中的 indexedDB 物件，均具備前綴屬性。

* `IDBFactory` (en-US) 可存取資料庫。此介面是透過全域物件 `indexedDB` 所建構，因此成為 API 的切入點。
* `IDBCursor` (en-US) 將依序存取物件與索引。
* `IDBCursorWithValue` (en-US) 將依序存取物件與索引，並回傳指標 (Cursor) 的目前數值。
* `IDBDatabase` (en-US) 代表到資料庫的連線。這也是能與資料庫互動的唯一方式。
* `IDBEnvironment` 可存取用戶端的資料庫。此介面是透過 window (en-US) 物件所建構。
* `IDBIndex` (en-US) 可存取索引的 Metadata。
* `IDBKeyRange` (en-US) 定義資料鍵範疇。
* `IDBObjectStore` (en-US) 代表物件存檔。
* `IDBOpenDBRequest` (en-US) 代表「開啟資料庫」的請求。
* `IDBRequest` (en-US) 代表向非同步資料庫和資料庫物件發出之請求，也就是呼叫非同步方法後回傳值。
* `IDBTransaction` (en-US) 代表一個交易。我們可以和資料庫進行交易，例如要求存取某一個物件存檔，以及決定要執行讀或寫的存取作業。
* `IDBVersionChangeEvent` (en-US) `則代表資料庫所變更的版本。`

以下 API 在早期規範中有定義，但現已移除。這邊列出僅供參考:

* IDBVersionChangeRequest 代表「更改資料庫版本」的請求。更改資料庫版本的方法已有不同 (呼叫 IDBFactory.open() (en-US) 而不需同時呼叫 IDBDatabase.setVersion() (en-US))；而且IDBOpenDBRequest (en-US)已經整合了從 IDBVersionChangeRequest 中所移除之功能。
* IDBDatabaseException 
已棄用
 在執行資料庫作業時，代表可能遭遇的例外狀況。

除了非同步 API，也有應用在WebWorkers (en-US)內的同步 API，但請注意目前還沒有瀏覽器支援同步 API。這裡也提供 API 的同步版本 (en-US)。

儲存限制
----

單一資料庫項目的容量/大小並沒有任何限制，但是各個 IndexedDB 資料庫的容量就有限制。此限制，還有使用者介面的斷言 (Assert) 方式，又將因瀏覽器而有所不同：

* Firefox：對 IndexedDB 資料庫的容量並無限制。但若要儲存的 Blobs 超過 50 MB，使用者介面將會要求權限。若要修改此容量，則可透過 dom.indexedDB.warningQuota (可至 http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js 中設定) 設定自己所需的限制。
* Google Chrome：請參閱 https://developers.google.com/chrome...rage#temporary
範例
--

Web 上的 IndexedDB 使用範例，是由 Marco Castelluccio 所提供。Marco 是 IndexedDB Mozilla DevDerby 的優勝者，而該得獎 Demo 為 eLibri，屬於函式庫與 eBook 閱讀器的 App。

另可參閱
----

* IndexedDB 基本概念
* 使用 IndexedDB
* 在 IndexedDB 中儲存影像與檔案
* 使用 HTML5 IndexedDB 的簡易 TODO 清單

**備註：** 此線上教學是根據較舊版本的規格所列，因此無法搭配最新版的瀏覽器。新版本已移除其中的 `setVersion()` 函式。
* Indexed Database API 規格
* IndexedDB — 儲存於自己的瀏覽器中
* IndexedDB 範例
* 僅支援 WebSQL 的瀏覽器 (例如行動 WebKit)，可適用 IndexedDB Polyfill
* JQuery IndexedDB 外掛程式
DocumentFragment
================

**`DocumentFragment`** 介面表示了一個沒有父節點的最小化文件物件。`DocumentFragment` 被當作一種輕量化的 `Document` (en-US)，用如同標準文件一般的方式保存片段的文件結構（由節點組成）。關鍵的區別在於文件片段不是真實的 DOM 結構，文件片段的變動並不會影響目前的網頁文件，也不會導致回流（reflow）或引起任何影響效能的情況發生。

一般的用法是建立一個 `DocumentFragment` 物件，在此物件中組織一個 DOM 的子樹。再使用 `Node` (en-US) 介面定義的方法，如 `appendChild()` (en-US) 或 `insertBefore()` (en-US) 將這個文件片段加入或插入目前頁面的 DOM 當中。執行這個將文件片段中的節點置入 DOM 的動作之後，會留下一個空的 `DocumentFragment` 物件（只會插入物件中的節點，`DocumentFragment` 物件本身不會被插入）。由於文件片段中的所有節點是一次性的被插入目前頁面文件當中，故回流及頁面渲染只會被觸發一次，所以可用插入 `DocumentFragment` 物件的方式取代傳統分別插入多個節點至 DOM（將節點一個一個分次進行插入）的操作方式。

此介面也適合與 Web components 搭配使用：`<template>` 元素在其 `HTMLTemplateElement.content` (en-US) 屬性中便包含了一個 `DocumentFragment` 物件。

可使用 `document.createDocumentFragment()` 方法或 `DocumentFragment` 的建構式來建立一個空的 `DocumentFragment` 物件。

屬性
--

*This interface has no specific properties, but inherits those of its parent,* *`Node` (en-US), and implements those of the `ParentNode` interface.*

`ParentNode.children` Read only 
實驗性質

Returns a live `HTMLCollection` (en-US) containing all objects of type `Element` (en-US) that are children of the `DocumentFragment` object.

`ParentNode.firstElementChild` Read only 
實驗性質

Returns the `Element` (en-US) that is the first child of the `DocumentFragment` object, or `null` if there is none.

`ParentNode.lastElementChild` (en-US) Read only 
實驗性質

Returns the `Element` (en-US) that is the last child of the `DocumentFragment` object, or `null` if there is none.

`ParentNode.childElementCount` (en-US) Read only 
實驗性質

Returns an `unsigned long` giving the amount of children that the `DocumentFragment` has.

建構式
---

`DocumentFragment()` (en-US) 
實驗性質

Returns an empty `DocumentFragment` object.

方法
--

*This interface inherits the methods of its parent, `Node` (en-US), and implements those of the `ParentNode` interface.*

`DocumentFragment.find()` 
實驗性質

Returns the first matching `Element` (en-US) in the tree of the `DocumentFragment`.

`DocumentFragment.findAll()` 
實驗性質

Returns a `NodeList` of matching `Element` (en-US) in the tree of the `DocumentFragment`.

`DocumentFragment.querySelector()` (en-US)

Returns the first `Element` (en-US) node within the `DocumentFragment`, in document order, that matches the specified selectors.

`DocumentFragment.querySelectorAll()` (en-US)

Returns a `NodeList` of all the `Element` (en-US) nodes within the `DocumentFragment` that match the specified selectors.

`DocumentFragment.getElementById()` (en-US)

Returns the first `Element` (en-US) node within the `DocumentFragment`, in document order, that matches the specified ID.

規範
--

| Specification |
| --- |
| DOM Standard # interface-documentfragment |

瀏覽器相容性
------

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

參見
--

* The DOM interfaces index.
Geolocation.getCurrentPosition()
================================

**`Geolocation.getCurrentPosition()`** 方法用來獲取設備當前的位置。

語法
--
```

navigator.geolocation.getCurrentPosition(success[, error[, options]])
```

### 參數

*success*

一個回呼函式(callback function) 會被傳入一個`Position` 的物件。

*error* 選擇性

一個選擇性的錯誤回呼函式(callback function)，會被傳入一個 `PositionError` 的物件。

*options* 選擇性

一個選擇性的 `PositionOptions` 的物件。

範例
--


```js
var options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0,
};

function success(pos) {
  var crd = pos.coords;

  console.log("Your current position is:");
  console.log("Latitude : " + crd.latitude);
  console.log("Longitude: " + crd.longitude);
  console.log("More or less " + crd.accuracy + " meters.");
}

function error(err) {
  console.warn("ERROR(" + err.code + "): " + err.message);
}

navigator.geolocation.getCurrentPosition(success, error, options);
```

規格
--

| Specification |
| --- |
| Geolocation API # getcurrentposition-method |

瀏覽器的相容性
-------

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

請參考
---

* Using geolocation (en-US)
* `Navigator.geolocation`
Geolocation.clearWatch()
========================

**`Geolocation.clearWatch()`** 這個函式是用來取消 `Geolocation.watchPosition()` 註冊的函式。

語法
--
```

navigator.geolocation.clearWatch(id);
```

### 參數

*編號(id)*

這個編號(ID) 是由 `Geolocation.watchPosition()` 這個函式所回傳，當你不再需要收到位置更新時，你可以用此編號，取消 `Geolocation.watchPosition()` 的註冊。

範例
--


```js
var id, target, option;

function success(pos) {
  var crd = pos.coords;

  if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
    console.log("Congratulation, you reach the target");
    navigator.geolocation.clearWatch(id);
  }
}

function error(err) {
  console.warn("ERROR(" + err.code + "): " + err.message);
}

target = {
  latitude: 0,
  longitude: 0,
};

options = {
  enableHighAccuracy: false,
  timeout: 5000,
  maximumAge: 0,
};

id = navigator.geolocation.watchPosition(success, error, options);
```

規格
--

| Specification |
| --- |
| Geolocation API # clearwatch-method |

瀏覽器的相容性
-------

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

請參考
---

* Using geolocation (en-US)
* `Geolocation`
* `Geolocation.watchPosition()`
* `Geolocation.getCurrentPosition()`
Geolocation.watchPosition()
===========================

**`Geolocation.watchPosition()`** 這個方法是用來註冊一個處理的函式，當使用者的裝置位置更新時，這個函式所傳入的回呼函式(callback function) 就會自動被呼叫。你也可以選擇性的定義錯誤時哪些錯誤回呼函式(error callback function) 需要被呼叫。

這個函式將回傳一組 ID 編號，此編號搭配 `Geolocation.clearWatch()` 函式，即可停止更新使用者的位置。

語法
--


```js
watchPosition(success)
watchPosition(success, error)
watchPosition(success, error, options)
```

### 參數

*success*

一個回呼函式(callback function) 會被傳入一個 `Position` 的物件。

*error* 選擇性

一個選擇性的錯誤回呼函式(callback function)，會被傳入一個`PositionError` 的物件。

*options* 選擇性

一個選擇性 `PositionOptions` 的物件。

範例
--


```js
var id, target, options;

function success(pos) {
  var crd = pos.coords;

  if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
    console.log("Congratulations, you reached the target");
    navigator.geolocation.clearWatch(id);
  }
}

function error(err) {
  console.warn("ERROR(" + err.code + "): " + err.message);
}

target = {
  latitude: 0,
  longitude: 0,
};

options = {
  enableHighAccuracy: false,
  timeout: 5000,
  maximumAge: 0,
};

id = navigator.geolocation.watchPosition(success, error, options);
```

備註
--

如果你的應用程式是跑在 firefox OS 上，請參考 geolocation wake lock，此方法可以讓你的程式在背景或螢幕關上時也能持續收到位置更新。

規格
--

| Specification |
| --- |
| Geolocation API # watchposition-method |

瀏覽器的相容性
-------

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

請參考
---

* Using geolocation (en-US)
* 這個介面屬於`Geolocation`. 並且存取他的方式為`NavigatorGeolocation.geolocation` (en-US).
* 相反的操作: `Geolocation.clearWatch()`
* 類似的方法: `Geolocation.getCurrentPosition()`
EventListener
=============

**`EventListener`** 介面表示一個可以處理由 `EventTarget` 物件分派事件的物件。

**備註：** 基於相容舊版內容的需要， `EventListener` 可以接受一個函式及一個帶有 `handleEvent()` 屬性函式的物件。相關的範例顯示在下方。

屬性
--

*這個介面並不實作且不繼承任何屬性。*

方法
--

*這個介面不繼承任何方法。*

`EventListener.handleEvent()` (en-US)

一個可以在指定類型事件發生時被呼叫的函數。

範例
--

### HTML


```html
<button id="btn">Click here!</button>
```

### JavaScript


```js
const buttonElement = document.getElementById("btn");

// 透過提供回呼函數的方式對「click」事件新增處理器。
// 當元素被點選後會出現「Element clicked!」的彈出訊息。
buttonElement.addEventListener("click", function (event) {
  alert("Element clicked through function!");
});

// 基於相容性，一個帶有 `handleEvent` 的非函式物件可被視為處理函式。
buttonElement.addEventListener("click", {
  handleEvent: function (event) {
    alert("Element clicked through handleEvent property!");
  },
});
```

### 結果

### 檢閱相關

* addEventListener
規格
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-eventtarget-addeventlistener③ |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
EventTarget.dispatchEvent()
===========================

於此 `EventTarget` 物件上觸發特定的 `Event` 物件實體，相當於依照註冊的順序呼叫它的 `EventListener`。一般事件處理規則（包含捕捉（capturing）和可選的冒泡（bubbling）階段）也適用於用 `dispatchEvent()` 手動觸發事件。

語法
--
```

cancelled = !target.dispatchEvent(event)
```

### 參數

* `event` 是要被觸發的事件（`Event` 物件）。
* `target` 會被初始化為事件的 `Event.target` 屬性，其也影響了要呼叫哪一個事件監聽器。
### 回傳值

* 會在事件完成傳遞（捕捉、命中、冒泡三階段）之後才回傳其值。
* 若事件在傳遞過程當中，事件是可被取消的（`Event.cancelable` (en-US) 屬性為 `true`）且曾於一個或一個以上的事件處理器中被執行了該事件的 `Event.preventDefault()` 方法（且事件須確實已被取消了預設行為），即回傳 `false`。否則回傳 `true` 值。

若遇到以下 3 種情況，`dispatchEvent` 會拋出錯誤資訊－－ `UNSPECIFIED_EVENT_TYPE_ERR` ：

1. 執行 `dispatchEvent` 前並未藉由初始化事件指定事件類型
2. 事件類型為 `null` 。
3. 事件類型是個空白字串。

這些異常，處理器會報告「異常未捕獲（uncaught exceptions）」；

事件處理器（event handlers）會在一群呼叫堆（nested callstack）上執行：事件的呼叫方（caller）會先由處理器會阻擋暫停執行，直到事件完成才繼續執行，但是要注意的是，事件若發生異常並不會傳回給呼叫方。

注意
--

`dispatchEvent` 是「建立 → 初始化 → 觸發」的最後一步驟。這些步驟是用來觸發事件，讓事件完成。事件有多種建立方式，例如用 `document.createEvent` 並用 initEvent (en-US) 或其他特殊 methods ，像是 initMouseEvent (en-US) 或 initUIEvent (en-US) 來初始化。

詳請可參考《`Event`》。

範例
--

請參閱《建立或觸發事件》。

規格
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-eventtarget-dispatchevent③ |

瀏覽器支援度
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MediaDevices.enumerateDevices()
===============================

`MediaDevices`方法請求一個可用的媒體輸入與媒體輸出裝置列表，像是麥克風、相機、耳機等等。返回值`Promise`可被解析為一個描述裝置的`MediaDeviceInfo` (en-US)陣列。

對特定設備的存取由Permissions API控制。返回的裝置列表會省略任何未授予相應權限的設備，包括麥克風、相機、揚聲器選擇（對於輸出裝置）等等。

語法
--


```js
enumerateDevices()
```

### 參數

無。

### 返回值

當返回值`Promise`完成時，會得到一個`MediaDeviceInfo` (en-US)物件的陣列。陣列裡的每個物件描述一個可用的媒體輸入與輸出設備（只有被授予權限的裝置），物件的順序是有意義的，預設捕獲的裝置會被列在第一個。

如果枚舉失敗，promise 會被拒絕。

範例
--

以下是一個使用`enumerateDevices()`的範例，它會產生一個帶有標籤的（如果有標籤的話）device ID (en-US)列表。


```js
if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
  console.log("enumerateDevices() not supported.");
  return;
}

// List cameras and microphones.

navigator.mediaDevices
  .enumerateDevices()
  .then(function (devices) {
    devices.forEach(function (device) {
      console.log(
        device.kind + ": " + device.label + " id = " + device.deviceId,
      );
    });
  })
  .catch(function (err) {
    console.log(err.name + ": " + err.message);
  });
```


這可能會產生：


```bash
videoinput: id = csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=
audioinput: id = RKxXByjnabbADGQNNZqLVLdmXlS0YkETYCIbg+XxnvM=
audioinput: id = r2/xw1xUPIyZunfV1lGrKOma5wTOvCkWfZ368XCndm0=
```


或者如果有一個或多個`MediaStream` (en-US)處於活動狀態或是被授予持久性的權限，則將產生：


```bash
videoinput: FaceTime HD Camera (Built-in) id=csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=
audioinput: default (Built-in Microphone) id=RKxXByjnabbADGQNNZqLVLdmXlS0YkETYCIbg+XxnvM=
audioinput: Built-in Microphone id=r2/xw1xUPIyZunfV1lGrKOma5wTOvCkWfZ368XCndm0=
```

規範
--

| Specification |
| --- |
| Media Capture and Streams # dom-mediadevices-enumeratedevices |

瀏覽器兼容性
------

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

參見
--

* `MediaDevices.getUserMedia` (en-US)
* WebRTC (en-US) - the introductory page to the API
* MediaStream API - the API for the media stream objects
* Taking webcam photos (en-US) - a
 tutorial on using `getUserMedia()` for taking photos rather than video.
Performance.timing
==================

摘要
--

**`Performance.timing`** 是唯讀的屬性，傳回的 `PerformanceTiming` (en-US) 物件當中包含了效能與時間延遲相關的資訊。

語法
--
```

timingInfo = performance.timing;
```

規格
--

因為 Navigation Timing 規範已被棄用，此特性不再有望成為標準。請使用 `PerformanceNavigationTiming` (en-US) 介面代替。

瀏覽器支援狀況
-------

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

參照
--

* 屬於 `Performance` (en-US) 界面的一部份
FileReader.error
================

總覽
--

回傳讀取檔案時發生的錯誤。

語法
--
```

var error = instanceOfFileReader.error
```

Value
-----

A `DOMError` (en-US)

規格
--

| Specification |
| --- |
| File API # dom-filereader-error |

瀏覽器相容性
------

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

閱讀更多
----

* `FileReader`
FileReader.readyState
=====================

提供目前讀取狀態

語法
--
```

var state = instanceOfFileReader.readyState
```

數值
--

數字代表 `FileReader` API 三個可能的狀態：

| Value | State | Description |
| --- | --- | --- |
| `0` | `EMPTY` | Reader has been created. None of the read methods called yet. |
| `1` | `LOADING` | A read method has been called. |
| `2` | `DONE` | The operation is complete. |

規格
--

| Specification |
| --- |
| File API # dom-filereader-readystate |

瀏覽器相容性
------

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

閱讀更多
----

* `Blob`
Event.createEvent()
===================

建立一個新的事件，該事件必須先以其 `init()` method 初始化才行。

### 語法
```

document.createEvent(type)
```


`type`

一個 string 。表示所建立的事件名稱。

這個 method 會回傳一個新的 DOM `Event` object ，其事件類型為傳入的 type 。該事件必須先初始化才能使用。

### 範例


```js
var newEvent = document.createEvent("UIEvents");
```

### 規格定義

* DOM Level 2 Events
Document：scroll事件
=================

**`scroll`** 事件會在捲動文件的可視區域時觸發。元件（Element）捲動相關請參見`Element: scroll事件` (en-US)。

|  |  |
| --- | --- |
| Bubbles | 是 |
| Cancelable | 否 |
| 介面 | `Event` |
| 事件處理常式的屬性 | `onscroll` (en-US) |

**備註：** iOS 的 UIWebViews 中，`scroll`事件不會在捲動時觸發，而只在捲動結束後觸發。請參見 Bootstrap issue #16202。Safari 和 WKWebViews 不受本 bug 影響。

範例
--

### 限制捲動事件的觸發次數

Since scroll events can fire at a high rate, the event handler shouldn't execute computationally expensive operations such as DOM modifications. Instead, it is recommended to throttle the event using requestAnimationFrame(), setTimeout(), or a CustomEvent, as follows.

Note, however, that input events and animation frames are fired at about the same rate, and therefore the optimization below is often unnecessary. This example optimizes thescroll event for requestAnimationFrame.

有鑒於 `scroll` 事件可能會以很高的速率觸發，事件處理常式不應執行計算密集的操作（如 DOM 修改）。所以，建議改用 `requestAnimationFrame()`、`setTimeout()` (en-US) 或 `CustomEvent` 以調控事件的觸發次數，如下。

不過需要注意，輸入事件和動畫影格的觸發速率大致相同，因此通常沒有必要進行下述的最佳化。本範例最佳化`requestAnimationFrame`的`scroll`事件。


```js
// 參考來源：http://www.html5rocks.com/en/tutorials/speed/animations/

let lastKnownScrollPosition = 0;
let ticking = false;

function doSomething(scrollPos) {
  // 依據捲動位置進行某些操作
}

document.addEventListener("scroll", function (e) {
  lastKnownScrollPosition = window.scrollY;

  if (!ticking) {
    window.requestAnimationFrame(function () {
      doSomething(lastKnownScrollPosition);
      ticking = false;
    });

    ticking = true;
  }
});
```


更多類似範例可見`resize` (en-US)事件頁面。

規格
--

| Specification |
| --- |
| CSSOM View Module # eventdef-document-scroll |
| HTML Standard # handler-onscroll |

瀏覽器相容性
------

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

延伸閱讀
----

* Element: `scroll`事件 (en-US)
Document.forms
==============

`forms` 屬性會回傳一個包含目前頁面中所有 `<form>` (en-US) 元素的集合物件（型別為 `HTMLCollection` (en-US)）。

語法
--
```

collection = document.forms;
```

範例：取得表單資訊
---------


```html
<!doctype html>
<html lang="en">
  <head>
    <title>document.forms example</title>
  </head>

  <body>
    <form id="robby">
      <input
 type="button"
 onclick="alert(document.forms[0].id);"
 value="robby's form" />
    </form>

    <form id="dave">
      <input
 type="button"
 onclick="alert(document.forms[1].id);"
 value="dave's form" />
    </form>

    <form id="paul">
      <input
 type="button"
 onclick="alert(document.forms[2].id);"
 value="paul's form" />
    </form>
  </body>
</html>
```

範例 2：取得表單內的元素
-------------


```js
var selectForm = document.forms[index];
var selectFormElement = document.forms[index].elements[index];
```

規範
--

| Specification |
| --- |
| HTML Standard # dom-document-forms-dev |

參見
--

* `HTMLFormElement` (en-US)
Document.head
=============

回傳當前文件的 `<head>` 元素。如果該文件有超過一個 `<head>` 元素，那只會回傳第一個 `<head>` 元素。

語法
--
```

var objRef = document.head;
```

範例
--


```js
// in HTML: <head id="my-document-head">
var aHead = document.head;

alert(aHead.id); // "my-document-head";

alert(document.head === document.querySelector("head")); // true
```

備註
--

`document.head` 是「唯讀」。若是想要將 `document.head` 改成別的值會失敗，這時有些瀏覽器不會告知任何錯誤訊息；有些，例如在 ECMAScript Strict 模式下 (en-US) 的 Gecko 瀏覽器，會給出 `TypeError` (en-US) 異常。

規範
--

| Specification |
| --- |
| HTML Standard # dom-document-head-dev |

瀏覽器相容性
------

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

參見
--

* `document.body` (en-US)
Document.createRange()
======================

回傳一 `Range` (en-US) 物件。

語法
--
```

range = document.createRange();
```


`創造 range` 為 `Range` (en-US) 物件.

示例
--


```js
var range = document.createRange();

range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
```

註意
--

當 `Range` 被創建之後，必須先設定其範圍初始點及結束點， 才能使用大部分 `Range` (en-US) 所提供的方法。

規範
--

* DOM Level 2 Range: DocumentRange.createRange