recursal/MDN huggingface dataset:
Response
========

Fetch API 的 **`Response`** 介面代表了一個請求會返回的回應。

你可以用 `Response.Response()` (en-US) 建構子創建一個新的 `Response`物件。但實務上碰到 Response 物件的時機，比較常出現在進行了一個 API 操作後，得到返回的 Response 物件。舉例而言，使用 service worker `Fetchevent.respondWith` (en-US) 或是使用單純的`GlobalFetch.fetch()` (en-US)。

建構子
---

`Response()` (en-US)

創建一個新的 `Response` 物件。

屬性
--

`Response.headers` (en-US) Read only 

包含與此 response 相關的 `Headers` (en-US) 物件。

`Response.ok` (en-US) Read only 

無論此 response 是不是成功 ( 狀態碼 200-299 ) 都會包含一個 boolean 狀態。

`Response.redirected` (en-US) Read only 

指出此 response 是不是個重新導向的結果，如果是的話，代表此 URL 具有一個以上的入口。

`Response.status` (en-US) Read only 

包含此 response 的狀態碼(例如：成功時為 `200` )。

`Response.statusText` (en-US) Read only 

包含狀態碼所對應的狀態文字 (例如： `OK` 對應 `200`)。

`Response.type` (en-US) Read only 

包含此 response 的類型 (例如： `basic`, `cors`)。

`Response.url` (en-US) Read only 

包含此 response 的 URL。

`Response.useFinalURL`

包含一個 boolean 狀態，指出此 URL 是否為此 response 的最後一步。

`Response` 實做了`Body`, 所以它另有以下可用的屬性：

`Body.body` (en-US) Read only 

A simple getter used to expose a `ReadableStream` (en-US) of the body contents.

`Body.bodyUsed` (en-US) Read only 

Stores a `Boolean` (en-US) that declares whether the body has been used in a response yet.

方法
--

`Response.clone()` (en-US)

建立一份 `Response` 的複製物件。

`Response.error()` (en-US)

Returns a new `Response` object associated with a network error.

`Response.redirect()` (en-US)

Creates a new response with a different URL.

`Response` implements `Body`, so it also has the following methods available to it:

`Body.arrayBuffer()` (en-US)

Takes a `Response` stream and reads it to completion. It returns a promise that resolves with an `ArrayBuffer`.

`Body.blob()` (en-US)

Takes a `Response` stream and reads it to completion. It returns a promise that resolves with a `Blob`.

`Body.formData()` (en-US)

Takes a `Response` stream and reads it to completion. It returns a promise that resolves with a `FormData` object.

`Body.json()` (en-US)

Takes a `Response` stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as `JSON`.

`Body.text()` (en-US)

Takes a `Response` stream and reads it to completion. It returns a promise that resolves with a `USVString` (en-US) (text).

範例
--

在基本 fetch 範例 (run example live) 中，我們使用 `fetch()` 呼叫來得到圖片，並使用 `<img>` (en-US) tag 顯示。 這裡的`fetch()` 呼叫返回了一個 promise，它使用與資源 fetch 操作有關的 `Response` 進行解析。你可能有發現，由於我們要求的是一張圖片，所以需要用 `Body.blob` (en-US) (`Response` 時做了 body) 讓 response 有正確的 MIME 類型。


```js
const image = document.querySelector(".my-image");
fetch("flowers.jpg")
  .then(function (response) {
    return response.blob();
  })
  .then(function (blob) {
    const objectURL = URL.createObjectURL(blob);
    image.src = objectURL;
  });
```


除此之外，你也能用 `Response.Response()` (en-US) 建構子去建立自己的客製化 `Response` 物件：


```js
const response = new Response();
```

規範
--

| Specification |
| --- |
| Fetch Standard # response-class |

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

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

參考
--

* ServiceWorker API (en-US)
* HTTP access control (CORS)
* HTTP
NamedNodeMap
============

**`NamedNodeMap`** 介面表示了 `Attr` (en-US) 物件的集合。雖然 `NamedNodeMap` 與 `NodeList` 都能如陣列一般透過索引訪問成員，但和 `NodeList` 不同的是，`NamedNodeMap` 中的成員並沒有順序。

`NamedNodeMap` 物件具有*即時性（live）*，如果其內部成員（屬性節點物件）發生改變，`NamedNodeMap` 物件會自動更新至最新的狀態。

**備註：** 僅管被稱作 `NamedNodeMap`，但本介面並不是直接用來處理節點物件（`Node` (en-US)），而是專門負責屬性節點物件（`Attr` (en-US)）。屬性節點是一種特殊的節點，在部分瀏覽器實作中依然存在。

屬性
--

*This interface doesn't inherit any property.*

`NamedNodeMap.length` (en-US) Read only 

Returns the amount of objects in the map.

方法
--

*This interface doesn't inherit any method.*

`NamedNodeMap.getNamedItem()` (en-US)

Returns a `Attr` (en-US), corresponding to the given name.

`NamedNodeMap.setNamedItem()` (en-US)

Replaces, or adds, the `Attr` (en-US) identified in the map by the given name.

`NamedNodeMap.removeNamedItem()` (en-US)

Removes the `Attr` (en-US) identified by the given map.

`NamedNodeMap.item()` (en-US)

Returns the `Attr` (en-US) at the given index, or `null` if the index is higher or equal to the number of nodes.

`NamedNodeMap.getNamedItemNS()` (en-US)

Returns a `Attr` (en-US) identified by a namespace and related local name.

`NamedNodeMap.setNamedItemNS()` (en-US)

Replaces, or adds, the `Attr` (en-US) identified in the map by the given namespace and related local name.

`NamedNodeMap.removeNamedItemNS()` (en-US)

Removes the `Attr` (en-US) identified by the given namespace and related local name.

規範
--

| Specification |
| --- |
| DOM Standard # interface-namednodemap |

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

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

參見
--

* `Element.attributes` (en-US)
Coordinates
===========

**`Coordinates`** 這個介面用來存取裝置的經緯度，速度以及這些數值的準確度。

屬性
--

*`Coordinates` 這個介面沒有繼承任何屬性*。

`Coordinates.latitude` Read only 

回傳一個十進位的 double 代表緯度。

`Coordinates.longitude` Read only 

回傳一個十進位的 double 代表經度。

`Coordinates.altitude` Read only 

回傳一個 double 代表距離海平面的高度，單位為公尺。如果無法提供這個值則回傳 null。

`Coordinates.accuracy` Read only 

回傳一個 double 代表經緯度的精準值，單位為公尺。

`Coordinates.altitudeAccuracy` Read only 

回傳一個 double 代表高度的精準度，單位為公尺。如果無法提供這個值則回傳 null。

`Coordinates.heading` Read only 

回傳一個 double 代表裝置前進的方向，這個數值代表你偏離北方多少度，0 度代表你向著正北方，照著順時針的方向遞增(90 度代表正東方，270 度代表正西方) 。如果速度值為 0 度，則此值為 `NaN` (en-US)。如果無法提供這個值則回傳 null。

`Coordinates.speed` Read only 

回傳一個 double 代表速度，單位為公尺/秒。如果無法提供這個值則回傳 null。

方法
--

**`Coordinates` 這個介面**，沒有實作也沒有繼承自任何的方法。

規格
--

| Specification |
| --- |
| Geolocation API # coordinates\_interface |

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

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

請參考
---

* Using geolocation (en-US)
* `Geolocation` 介面使用此物件。
ClipboardEvent
==============

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

**`ClipboardEvent`** 介面表示了與修改剪貼簿相關的事件，包括 `cut` (en-US)、`copy` (en-US) 及 `paste` (en-US) 事件。

屬性
--

*Also inherits properties from its parent `Event`*.

`ClipboardEvent.clipboardData` (en-US) Read only 

Is a `DataTransfer` (en-US) object containing the data affected by the user-initiated `cut` (en-US), `copy` (en-US), or `paste` (en-US) operation, along with its MIME type.

建構式
---

`ClipboardEvent()` (en-US)

Creates a `ClipboardEvent` event with the given parameters.

方法
--

*No specific methods; inherits methods from its parent `Event`*.

規範
--

| Specification |
| --- |
| Clipboard API and events # clipboard-event-interfaces |

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

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

參見
--

* Copy-related events: `copy` (en-US), `cut` (en-US), `paste` (en-US)
WebSockets
==========

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

WebSocket 是一種讓瀏覽器與伺服器進行一段互動通訊的技術。這個 API 在不必輪詢（poll）伺服器下，讓使用者傳送訊息至伺服器並接受事件驅動回應。

|  |  |
| --- | --- |
| 文件

製作 WebSocket 客戶端應用程式
指導如何製作在瀏覽器上跑 WebSocket 客戶端的教程。
WebSockets 參考手冊
客戶端的 WebSocket API 參考手冊。
The WebSocket protocol
WebSocket 協定參考。
Writing WebSocket servers
處理 WebSocket 協定的伺服器端代碼書寫指引。
 | 工具* Socket.IO：一個強大的跨平台 WebSocket
 API，建構在 Node.js 之上。
* WebSocket-Node：一個 WebSocket 伺服器 API 的實作，建構在
 Node.js 之上。

相關主題

AJAX、JavaScript
 |

參見
--

* WebSocket API Specification
* Server-Sent Events
瀏覽器兼容
-----

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

**Battery Status API** 也就是所謂的 **Battery API**，將提供系統電池充電容量的資訊，並在電池容量變化時送出事件，以通知使用者。此 API 可調整 Apps 的資源耗用量，在電力偏低時縮減耗電量；或可在電力耗盡之前儲存檔案，避免資料遺失。

Battery Status API 是以 `window.navigator.battery` (en-US) 屬性 (為 `BatteryManager` (en-US) 物件) 而擴充了 `window.navigator` (en-US)，並新增數項可讓使用者接收的新事件，以隨時監控電池狀態。

範例
--

在此範例中，我們將分別監聽 chargingchange 與 levelchange 事件，而看到充電狀態 (不論是否插電進行充電) 與電池容量的變化。


```js
var battery =
  navigator.battery || navigator.mozBattery || navigator.webkitBattery;

function updateBatteryStatus() {
  console.log("Battery status: " + battery.level \* 100 + " %");

  if (battery.charging) {
    console.log("Battery is charging");
  }
}

battery.addEventListener("chargingchange", updateBatteryStatus);
battery.addEventListener("levelchange", updateBatteryStatus);
updateBatteryStatus();
```


另可參閱規格所提供之範例。

規格
--

| Specification |
| --- |
| Battery Status API  |

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

### api.BatteryManager

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

### api.Navigator.getBattery

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

另請參閱
----

* 部落格文章 - Using the Battery API
* David Walsh 所寫的 JavaScript Battery Api
* battery.js - 跨瀏覽器 wrapper
* `BatteryManager` (en-US)
* `navigator.battery` (en-US)
* `測試你的瀏覽器是否支援 Battery Status API。可掃 QR Code:`
* ![QR Code to Battery Status API Test Page](http://x.co/qr/batstat?s=165)
Blob
====

`Blob`（Binary Large Object）物件代表了一個相當於檔案（原始資料）的不可變物件。Blob 中的資料並不一定是 JavaScript 原生的格式。`File` 介面基於 `Blob，`繼承 blob 並擴充其功能以支援操作使用者系統上的檔案。

從其它非 Blob 物件或資料來建構 `Blob` 物件，可以使用 `Blob()` 建構式。要建立一個包含目前 blob 內容子集的 blob，可使用 `slice()` (en-US) 方法。若要自使用者系統上的檔案取得 `Blob` 物件，請參考 `File` 文件。

接受 Blob 物件的 API 可以在 `File` 上找到。

**備註：** 早期 `slice()` 方法擁有第二個參數 `length` 以指定在建立新 `Blob` 物件時要複製的位元組（byte）數量。假如指定的 `start + length` 超出了來源 `Blob` 的大小，則回傳的 `Blob` 會包含自索引 `start` 至結尾的完整來源內容。

**備註：** 需注意在部分瀏覽器版本中，`slice()` 方法帶有前綴：Firefox 12 與之前的版本為 `blob.mozSlice()`，Safari 中是 `blob.webkitSlice()`。舊的、無前綴字版本的 `slice()` 方法則有不同的語意（semantics），但這是已淘汰的方法。瀏覽器對 `blob.mozSlice()` 的支援已在 Firefox 30 時中止。

建構式
---

`Blob(blobParts[, options])`

回傳新建立的 `Blob` 物件，包含了建構式參數傳入之陣列所串聯後的值。第二個參數為 BlobPropertyBag 物件，其擁有 `type` 和 `endings` 屬性。

屬性
--

`Blob.size` Read only 

以 byte 為單位的 `Blob` 物件大小。

`Blob.type` Read only 

`Blob` 物件中資料的型態，以 MIME 類型的字串表示。若型態為未知，則為空字串。

方法
--

`Blob.slice([start[, end[, contentType]]])` (en-US)

回傳一個包含當前 `Blob` 物件之指定資料範圍（byte）內容的新 `Blob` 物件。

範例
--

### Blob 建構函數用法範例

`Blob() constructor` 建構式允許由其它物件建立 blob 物件。以下的範例演示了以字串來建構 blob 物件：


```js
var debug = { hello: "world" };
var blob = new Blob([JSON.stringify(debug, null, 2)], {
  type: "application/json",
});
```


**警告：** 在 Blob 建構式出現之前，可以透過 `BlobBuilder` (en-US) 來建立 blob 物件（目前已不建議使用）：


```js
var builder = new BlobBuilder();
var fileParts = ['<a id="a"><b id="b">hey!</b></a>'];
builder.append(fileParts[0]);
var myBlob = builder.getBlob("text/xml");
```


### 藉型別陣列建構的 blob 來建立 URL

範例程式碼：


```js
var typedArray = GetTheTypedArraySomehow();
var blob = new Blob([typedArray], { type: "application/octet-binary" }); // pass a useful mime type here
var url = URL.createObjectURL(blob);
// url will be something like: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
// now you can use the url in any context that regular URLs can be used in, for example img.src, etc.
```

### 從 Blob 取出資料

從 Blob 讀取資料的唯一方式就是使用 `FileReader`。以下範例展示了讀取 Blob 內容作為型別陣列：


```js
var reader = new FileReader();
reader.addEventListener("loadend", function () {
  // reader.result contains the contents of blob as a typed array
});
reader.readAsArrayBuffer(blob);
```


藉由操作 `FileReader` 的其他方法，將 Blob 讀取成字串或是 data URL 是有可能的。

規範
--

| Specification |
| --- |
| File API # blob-section |

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

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

參見
--

* `BlobBuilder` (en-US)
* `File`
* `URL.createObjectURL` (en-US)
* Components.utils.importGlobalProperties
Payment Request API
===================

**Secure context:** This feature is available only in secure contexts (en-US) (HTTPS), in some or all supporting browsers.

Payment Request API 提供商家與用戶雙方一致的用戶體驗。它並不是嶄新的支付方式、而是讓用戶選擇偏好的支付方式、並把該方式提供給商家。

Payment Request 的概念和用法
----------------------

很多放棄線上購物的問題，與結帳表單的填寫有關：填寫這些東西既困難又耗時、步驟還極度繁雜。**Payment Request API**正是為減少、甚至擺脫要完成表單所需的填寫步驟而生。它藉由不假手 HTML 表單的情況下，記下要傳給商家的用戶資訊，來簡化結帳步驟。

針對信用卡付款，使用 Payment Request API 的好處有：

* **快速的訂購體驗**：用戶在進入瀏覽器時輸入資訊、接著就備齊網路購物所需。用戶再也無須於多個網站，填寫相同資訊。
* **各站一致且支援 API 的用戶體驗**：由於是瀏覽器在掌管付款資訊，用戶體驗將能客製化、還可以把 UI 本土化為用戶偏好的語言。
* **無障礙**：由於是瀏覽器在掌管輸入表單，各網站針對鍵盤和螢幕閱讀器的無障礙將確保一致，而無須開發者動工。瀏覽器還能調整輸入表單的字體大小、色彩對比，讓用戶能更輕鬆地完成付款。
* **憑證管理**：用戶能在瀏覽器，管理信用卡與送達地址的資訊。瀏覽器還能跨設備同步這些「憑證」，以便用戶在電腦與手機周旋間，依舊能輕易付款。
* **一致的錯誤處理**：瀏覽器會檢查信用卡號碼、並告訴用戶該卡片（將）過期與否；瀏覽器也可以藉由商家的使用模式或限制（例如「只接受 Visa 卡或萬事達卡（Mastercard）」）自動提示用戶、或允許其選擇偏好的信用卡。

要請求支付的話，建立 `PaymentRequest` 物件的網頁，將回應用戶發動付款的行為，像是點選「購物」按鈕。`PaymentRequest` 將允許網頁在用戶提供完成交易所需資訊時交換之。

你可以在 使用 Payment Request API (en-US) 文章看到完整教學。

**備註：** 此 API 只有在設定 `allowpaymentrequest` (en-US) 屬性下，才可支援跨域 `<iframe>` (en-US) 元素。

介面
--

`PaymentAddress` (en-US)

地址資訊物件，具體用途有付款與送達。

`PaymentRequest`

提供 API 以便建立與管理用戶代理的付款介面物件。

`PaymentRequestEvent` (en-US)

建立 `PaymentRequest` 時發送給付款處理器（payment handler）的事件。

`PaymentRequestUpdateEvent` (en-US)

允許網頁針對用戶行為，發動更新用戶付款資訊的請求。

`PaymentMethodChangeEvent` (en-US)

表示用戶更改付款工具（例如從信用卡轉為簽帳金融卡）。

`PaymentResponse` (en-US)

在用戶選取付款方法、並同意付款請求後，所回傳的物件。

`MerchantValidationEvent` (en-US)

表示商家（網站）要求使用特定支付方法的瀏覽器驗證處理器（例如：要不要放行 Apple Pay）

字詞（dictionary）
--------------

`AddressErrors`

此字詞包含任何與 `PaymentAddress` (en-US) entry 錯誤相關的描述性解釋字串。

`PayerErrors`

此字詞包含任何與 `PaymentResponse` (en-US) 的 email、電話、名字屬性（name attribute）錯誤相關之描述性解釋字串。

`PaymentDetailsUpdate` (en-US)

此物件描述伺服器在用戶開始互動前、實例化支付界面後，針對行為需要修改的付款資訊。

### Related dictionaries for the Basic Card specification

`BasicCardChangeDetails`

An object providing *redacted* address information that is provided as the `methodDetails` (en-US) on the `paymentmethodchange` event sent to the `PaymentRequest` when the user changes payment information.

`BasicCardErrors`

An object providing any error messages associated with the fields in the `BasicCardResponse` object that are not valid. This is used as the value of the `paymentMethod` property on the `PaymentValidationErrors` (en-US) object sent to the `PaymentRequest` when an error occurs.

`BasicCardRequest`

Defines an object structure for containing payment request details such as card type.

`BasicCardResponse`

Defines an object structure for payment response details such as the number/expiry date of the card used to make the payment, and the billing address.

規範
--

| Specification |
| --- |
| Payment Request API 1.1 # paymentrequest-interface |

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

### PaymentRequest 介面

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

參見
--

* 使用 Payment Request API (en-US)
* Payment 處理概念 (en-US)
* Introducing the Payment Request API for Apple Pay
* Google Pay API PaymentRequest Tutorial
* W3C Payment Request API FAQ
CustomEvent
===========

**`CustomEvent`** interface 是應用程式為了任意目的所初始化的事件。

**備註：** 此功能可在 Web Worker (en-US) 中使用

Event

CustomEvent建構式
---

`CustomEvent()`

建立一個 `CustomEvent`。

屬性
--

*此介面繼承了其父介面 `Event` 的屬性。*

`CustomEvent.initCustomEvent()` (en-US) 
已棄用

初始化一個`CustomEvent`物件。若該事件已經被觸發，則不會進行任何動作。

規格
--

| Specification |
| --- |
| DOM Standard # interface-customevent |

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

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

參見
--

* `Window.postMessage()` (en-US)
* Creating and triggering events
Server-sent events
==================

網頁一般來說是由客戶端向伺服器請求資料. 藉由 server-sent 事件, 伺服器在任何時候都可以向客戶端推送資料. 即將推送進來的訊息可以自客戶端上做 *Events (en-US) + data* 處理.

文件
--

使用 server-sent events (en-US)

有關如何在伺服器端和客戶端使用 server-sent 事件的教學文章.

參考 EventSource (en-US)

關於客戶端的 EventSource API.

工具
--

* Remy Sharp's EventSource polyfill
* Yaffle's EventSource polyfill
* Rick Waldron's jquery plugin
相關主題
----

* AJAX, JavaScript, WebSockets
規範
--

| Specification |
| --- |
| HTML Standard # server-sent-events |

參見
--

* A Twitter like application powered by server-sent events and its code on Github.
* HTML5 and Server-sent events
* Server-sent events using Asp.Net
MediaQueryList
==============

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

`MediaQueryList` 物件維護一組針對 `document` (en-US) 的 media querie (en-US) , 並且當 media querie 相對應的文件狀態改變時，觸發註冊的事件處理器通知之。

MediaQueryList 物件讓我們不用一直定期去偵測，而是直接去觀察文件的狀態變化。

Method overview
---------------

| `void addListener(MediaQueryListListener listener);` |
| --- |
| `void removeListener(MediaQueryListListener listener);` |

Properties
----------

| Property | Type | Description |
| --- | --- | --- |
| `matches` | `boolean` | `true` 當 `document` (en-US) 目前狀態符合 media query list 所維護的條件; 否則 false。 唯獨\*\*。\*\* |
| `media` | `DOMString` | 序列化 (serialized) 的 media query list. |

Methods
-------

### addListener()

添加一個新的事件處理器 (listener)，若 listener 已存在則無作用。
```

void addListener(
  MediaQueryListListener listener
);
```


#### Parameter (for addListener method)

`listener`

當 media query 對應的狀態改變時所觸發的事件處理函數 (`MediaQueryListListener` (en-US))。

### removeListener()

移除一個事件處理器 (listener)，若 listener 不存在則無作用。
```

void removeListener(
  MediaQueryListListener listener
);
```


#### Parameter (for removeListener method)

`listener`

欲移除的事件處理函數 (`MediaQueryListListener` (en-US))。

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

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

規範標準
----

* The CSSOM View Module: The MediaQueryList Interface
延伸閱讀
----

* Media queries (en-US)
* Using media queries from code (en-US)
* `window.matchMedia()` (en-US)
* `MediaQueryListListener` (en-US)
AbortController
===============

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

**`AbortController`** 介面代表一個控制器物件，讓你可以在需要時中斷一個或多個 DOM 請求。

你可以使用 `AbortController.AbortController()` (en-US) 建立一個新的 `AbortController` 物件。與 DOM 請求溝通時則是使用 `AbortSignal` (en-US) 物件。

建構子
---

`AbortController.AbortController()` (en-US)

建立一個新的 `AbortController` 物件實體。

屬性
--

`AbortController.signal` (en-US) Read only 

回傳一個 `AbortSignal` (en-US) 物件實體，可以用來中斷一個 DOM 請求、或是與其溝通。

方法
--

`AbortController.abort()` (en-US)

在一個 DOM 請求完成前中斷他。這可以用來中斷 fetch 請求 (en-US)、對任何 Response `Body` 的讀取、或是資料流。

範例
--

在下面的程式碼片段中，我們要用 Fetch API 來下載一部影片。

我們首先用 `AbortController()` (en-US) 建立一個控制器，然後透過 `AbortController.signal` (en-US) 屬性取得他的 `AbortSignal` (en-US) 物件。

在初始化 fetch 請求 (en-US) 的時候，我們把 `AbortSignal` 作為選項傳入該請求的選項物件中（參考下方的 `{signal}`）。這樣會把剛才的中斷訊號與控制器跟 fetch 請求關聯起來，讓我們可以透過呼叫 `AbortController.abort()` (en-US) 來中斷該請求。請參考下方範例中第二個事件處理器。


```js
var controller = new AbortController();
var signal = controller.signal;

var downloadBtn = document.querySelector('.download');
var abortBtn = document.querySelector('.abort');

downloadBtn.addEventListener('click', fetchVideo);

abortBtn.addEventListener('click', function() {
  controller.abort();
  console.log('下載已中斷');
});

function fetchVideo() {
  ...
  fetch(url, {signal}).then(function(response) {
    ...
  }).catch(function(e) {
    reports.textContent = '下載錯誤: ' + e.message;
  })
}
```


**備註：** 當 `abort()` 被呼叫的時候，`fetch()` 回傳的 Promise 會被以 `AbortError` 拒絕。

在 GitHub 有個完整的範例可供參考 — 請參見 abort-api（或是也可以實際體驗看看）。

規格
--

| Specification |
| --- |
| DOM Standard # interface-abortcontroller |

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

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

參見
--

* Fetch API
* Abortable Fetch by Jake Archibald
DOMTokenList
============

**`DOMTokenList`** 介面表示了一個以空格作為分隔的內容集，通常來自 `Element.classList` (en-US)、`HTMLLinkElement.relList` (en-US)、`HTMLAnchorElement.relList` (en-US) 或 `HTMLAreaElement.relList` (en-US) 等屬性。本介面與 `Array` 同樣是由 `0` 開始索引，且 `DOMTokenList` 是區分大小寫的。

屬性
--

*This interface doesn't inherit any property.*

`DOMTokenList.length` (en-US) Read only 

Is an `integer` representing the number of objects stored in the object.

方法
--

*This interface doesn't inherit any method.*

`DOMTokenList.item()` (en-US)

Returns an item in the list by its index (or undefined if the number is greater than or equal to the length of the list, prior to Gecko 7.0 returned null)

`DOMTokenList.contains()` (en-US)

Returns `true` if the underlying string contains *token*, otherwise `false`

`DOMTokenList.add()` (en-US)

Adds *token* to the underlying string

`DOMTokenList.remove()` (en-US)

Removes *token* from the underlying string

`DOMTokenList.replace()` (en-US)

Replaces an existing *token* with a new token.

`DOMTokenList.supports()` (en-US)

Returns `true` if a given *token* is in the associated attribute's supported tokens.

`DOMTokenList.toggle()` (en-US)

Removes *token* from string and returns false. If *token* doesn't exist it's added and the function returns true

規範
--

| Specification |
| --- |
| DOM Standard # interface-domtokenlist |

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

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

參見
--

* `DOMSettableTokenList` (object that extends DOMTokenList with settable *.value* property)
Notifications API
=================

Notifications API 允許網頁控制向終端用戶顯示系統通知 — 它在網頁瀏覽器的視圖之外，因此使用者切換顯示卡或移至不同的應用程式也能顯示。此 API 設計為在相容於不同平台與現有的通知系統相容。

概念與使用方法
-------

在受到支持的平台上，顯示系統通知通常涉及兩件事。 首先，用戶需要授予當前的來源權限才能顯示系統通知，通常在應用程式或網站初始化完成後使用`Notification.requestPermission()` (en-US) 方法。


```js
btn.addEventListener("click", function () {
  let promise = Notification.requestPermission();
  // wait for permission
});
```


這不僅是最佳實踐 — 你不應向用戶發送他們不同意的通知，並且在未來瀏覽器將明確禁止沒有響應用戶請求允許通知對話框的通知。Firefox 72 開始已遵循這項約定。使用此方法將產生一個請求對話框，如下所示：

![](/zh-TW/docs/Web/API/Notifications_API/screen_shot_2019-12-11_at_9.59.14_am.png)

用戶可以從此處選擇允許、屏蔽來自此來源的通知，也可以不做選擇。 一旦選定，該設置通常將在當前會話中保持不變。

**備註：** 從 Firefox 44 開始，Notifications 和 Push (en-US) 的權限已合併。如果授予通知權限則推送也將被啟用。

下一步，使用 `Notification()` (en-US) 構造函數創建一個新通知。 這必須要傳遞一個標題參數(title)，並且可以選擇性的傳遞選擇物件指定諸如文字方向、正文、圖標、撥放通知的聲音等等。

**備註：** 此功能可在 Web Worker (en-US) 中使用

另外，Notifications API 規範指定了 ServiceWorker API (en-US) 的許多附加功能，以允許服務人員觸發通知。

**備註：** 要了解有關在自己的應用程序中使用通知的更多信息，請閱讀 Using the Notifications API。

Notifications 介面
----------------

`Notification`

定義一個通知物件。

### Service worker 附加功能

`ServiceWorkerRegistration` (en-US)

包含 `ServiceWorkerRegistration.showNotification()` (en-US) 和 `ServiceWorkerRegistration.getNotifications()` (en-US) 用於控制通知顯示的方法。

`ServiceWorkerGlobalScope` (en-US)

包含 `ServiceWorkerGlobalScope.onnotificationclick` 點擊通知時觸發自定義函數的處理程序。

`NotificationEvent` (en-US)

基於 `ExtendableEvent` (en-US) 的特定類型的事件對象，它表示已觸發的通知。

規範
--

| Specification |
| --- |
| Notifications API Standard  |

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

### api.Notification

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

### api.ServiceWorkerRegistration.showNotification

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

### api.ServiceWorkerRegistration.getNotifications

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

Firefox OS permissions
----------------------

When using notifications in a Firefox OS app, be sure to add the `desktop-notification` permission in your manifest file. Notifications can be used at any permission level, hosted or above:


```json
"permissions": {
  "desktop-notification": {}
}
```

參見
--

* Using the Notifications API
TouchList
=========

`TouchList` 介面表示了一個觸控平面上所有觸碰點的列表；舉例來說，假如使用者有三隻手指於觸控平面（如觸控螢幕或是觸控板）上，則其相對應的 `TouchList` 物件中就會分別有三個 `Touch` (en-US) 物件各代表一個手指的觸碰。

屬性
--

`TouchList.length` (en-US) Read only 

The number of `Touch` (en-US) objects in the `TouchList`.

方法
--

`TouchList.identifiedTouch()` 
已棄用

Returns the first `Touch` (en-US) item in the list whose identifier matches a specified value.

`TouchList.item()` (en-US)

Returns the `Touch` (en-US) object at the specified index in the list.

範例
--

See the example on the main Touch events article (en-US).

規範
--

| Specification |
| --- |
| Touch Events # touchlist-interface |

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

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

參見
--

* Touch events (en-US)
* `Document.createTouchList()` (en-US)