recursal/MDN huggingface dataset:
WheelEvent
==========

WheelEvent DOM 事件會在用戶滚动滑鼠滚轮或操作其它類似滑鼠的設備時觸發。

**警告：** 該事件爲標準規定的事件介面。早期的瀏覽器實現過 `MouseWheelEvent` (en-US) 和 `MouseScrollEvent` (en-US) 兩種滾輪事件介面，但這兩種介面皆非標準，加之各瀏覽器間對其相容性極差。因而開發者應用該標準事件介面取代這兩個非標準介面。

**備註：** 請勿想當然依據滾輪方向（即該事件的各 delta 屬性值）來推斷文檔內容的滾動方向，因標準未定義滾輪事件具體會引發什麼樣的行爲，引發的行爲實際上是各瀏覽器自行定義的。即便滾輪事件引發了文檔內容的滾動行爲，也不表示滾輪方向和文檔內容的滾動方向一定相同。因而通過該滾輪事件獲知文檔內容滾動方向的方法並不可靠。要獲取文檔內容的滾動方向，可在文檔內容滾動事件（`scroll` (en-US)）中監視 `scrollLeft` (en-US) 和 `scrollTop` 二值變化情況，即可推斷出滾動方向了。

Event

UIEvent

MouseEvent

(en-US)

WheelEvent建構式
---

`WheelEvent()` (en-US)

建立一個 `WheelEvent` 物件。

屬性
--

*該介面繼承了父介面 `MouseEvent` (en-US)、`UIEvent`、`Event` 的屬性。*

`WheelEvent.deltaX` (en-US) Read only 

返回 `double` 值，該值表示滾輪的橫向滾動量。

`WheelEvent.deltaY` (en-US) Read only 

返回 `double` 值，該值表示滾輪的縱向滾動量。

`WheelEvent.deltaZ` (en-US) Read only 

返回 `double` 值，該值表示滾輪的 z 軸方向上的滾動量。

`WheelEvent.deltaMode` (en-US) Read only 

返回 `unsigned long` 值，該值表示上述各 delta 的值的單位。該值及所表示的單位如下：

| 常數 | 值 | 描述 |
| --- | --- | --- |
| `DOM_DELTA_PIXEL` | `0x00` | 滾動量單位爲像素。 |
| `DOM_DELTA_LINE` | `0x01` | 滾動量單位爲行。 |
| `DOM_DELTA_PAGE` | `0x02` | 滾動量單位爲頁。 |

方法
--

*該介面本身未定義方法，但繼承了父介面 `MouseEvent` (en-US)、`UIEvent`、`Event` 的方法。*

規範
--

| Specification |
| --- |
| UI Events # interface-wheelevent |

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

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

參見
--

* `wheel` (en-US)
* 該介面取代的過時介面：
    + `MouseScrollEvent` (en-US)（Gecko 內核瀏覽器）
    + `MouseWheelEvent` (en-US)（非 Gecko 內核的瀏覽器）
ErrorEvent
==========

**`ErrorEvent`** 介面是用來提供程式碼或是檔案的錯誤訊息的事件。

Properties
----------

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

`ErrorEvent.message` Read only 

一 `DOMString` 提供具可讀性的關於問題的錯誤訊息。

`ErrorEvent.filename` Read only 

一 `DOMString` ，為發生錯誤的程式碼檔案的檔名。

`ErrorEvent.lineno` Read only 

一 `整數` ，為發生問題的程式的行數。

`ErrorEvent.colno` Read only 

一 `整數` ，為發生問題的程式的欄數。

`ErrorEvent.error` Read only  
實驗性質

一個參與該事件的 JavaScript `Object` 。

Constructor
-----------

`ErrorEvent()`

建立一 `ErrorEvent` 事件，其包含提供的參數。

Methods
-------

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

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

| Specification |
| --- |
| HTML Standard # the-errorevent-interface |

瀏覽器支援度比較
--------

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

延伸閱讀
----

* Using web workers (en-US), most likely objects to raise such an event
Geolocation
===========

**`Geolocation`** 介面代表一個物件可以透過你的網頁程式去獲得你的裝置位置。這個介面提供了網站或應用程式根據使用者的位置去客製化呈現的內容。

`Navigator` (en-US) 此物件實作了 `Navigator.geolocation` 介面。

**備註：** 因為隱私的因素，當網頁要求存取位置資訊時，用戶會被提示通知並且詢問授權與否。注意不同的瀏覽器在詢問授權時有各自不同的策略和方式。

性質
--

*`Geolocation` 介面沒有繼承也沒有時做任何方法*。

方法
--

**`Geolocation` 介面沒有繼承任何方法**。

`Geolocation.getCurrentPosition()`

取得裝置當前位置，並回傳`Position`。

`Geolocation.watchPosition()`

返回一個長整數，註冊一個回呼函數。這個方法是用來註冊一個處理的函式，當使用者的裝置位置更新時，這個函式所傳入的回呼函式(callback function) 就會自動被呼叫。

`Geolocation.clearWatch()`

移除指定註冊的 `watchPosition()`。

規格
--

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

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

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

請參考
---

* Using geolocation (en-US)
History
=======

**`History`** 介面允許操控瀏覽器的 *session history* 紀錄，為當前面頁所在分頁中訪問、或於當前面頁中透過頁面框架（frame）所載入的頁面。

屬性
--

*The `History`* *interface doesn't inherit any property.*

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

Returns an `Integer` representing the number of elements in the session history, including the currently loaded page. For example, for a page loaded in a new tab this property returns `1`.

`History.current` Read only  
非標準

已棄用

Returns a `DOMString` representing the URL of the active item of the session history. This property was never available to web content and is no more supported by any browser. Use `Location.href` (en-US) instead.

`History.next` Read only  
非標準

已棄用

Returns a `DOMString` representing the URL of the next item in the session history. This property was never available to web content and is not supported by other browsers.

`History.previous` Read only  
非標準

已棄用

Returns a `DOMString` representing the URL of the previous item in the session history. This property was never available to web content and is not supported by other browsers.

`History.scrollRestoration` (en-US) 
實驗性質

Allows web applications to explicitly set default scroll restoration behavior on history navigation. This property can be either `auto` or `manual`.

`History.state` (en-US) Read only 

Returns an `any` value representing the state at the top of the history stack. This is a way to look at the state without having to wait for a `popstate` event.

方法
--

*The `History`* *interface doesn't inherit any methods.*

`History.back()` (en-US)

回到 session history 紀錄中的前一頁，等同於使用者按下瀏覽器的上一頁按鈕。相當於 `history.go(-1)`。

**備註：** Calling this method to go back beyond the first page in the session history has no effect and doesn't raise an exception.

`History.forward()` (en-US)

回到 session history 紀錄中的下一頁，等同於使用者按下瀏覽器的下一頁按鈕。相當於 `history.go(1)`。

**備註：** Calling this method to go forward beyond the most recent page in the session history has no effect and doesn't raise an exception.

`History.go()` (en-US)

自 session history 紀錄中載入一個頁面，利用該頁面相對於目前頁面的所在位置，例如 -1 為前一頁或 1 為下一頁。若指定了一個超出範圍的值（舉例來說，在 session history 沒有先前訪頁面的情況下指定 -1），此方法將會是靜默（不會產生錯誤）且沒有任何效果的。不帶參數或是傳入 0 呼叫 `go()` 會重新載入目前頁面。Internet Explorer 也可以傳入字串來前往一個於瀏覽歷史列表中指定的頁面。

`History.pushState()` (en-US)

插入給定的資料與指定的標題（title）以及選擇性的 URL 至 session history 堆疊（stack）中。給定的資料將被 DOM 視為不透明的（opaque）；可以指定任何可被序列化的 JavaScript 物件。請注意 Firefox 目前會忽略標題（title）參數；更多資訊請參閱操控瀏覽器歷史紀錄。

`History.replaceState()` (en-US)

以指定的資料、標題（title）及可選的 URL 來更新歷史紀錄堆疊（history stack）中近期的項目。給定的資料將被 DOM 視為不透明的（opaque）；可以指定任何可被序列化的 JavaScript 物件。請注意 Firefox 目前會忽略標題（title）參數；更多資訊請參閱操控瀏覽器歷史紀錄。

規範
--

| Specification |
| --- |
| HTML Standard # the-history-interface |

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

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

參見
--

* The `Window.history` (en-US) property returning the history of the current session.
File
====

**`File`** 介面提供了檔案的資訊並且允許網頁中的 JavaScript 存取檔案的內容。

`File` 物件通常是從使用者於 `<input>` (en-US) 元素選擇之檔案所回傳的 `FileList` 物件當中取得，也可以來自拖放操作所產生的 `DataTransfer` (en-US) 物件之中，或是由 `HTMLCanvasElement` (en-US) 物件（元素物件）執行 `mozGetAsFile()` 方法後回傳。在 Gecko 引擎中，有專屬的程式碼能不需使用者操作即建立 `File` 物件來表示本地端的任一檔案（請參考 Implementation notes 以閱讀更多資訊）。

`File` 物件是一種特殊的 `Blob`，且可被用在任何接受 Blob 物件的地方。特別是 `FileReader`、`URL.createObjectURL()` (en-US)、`createImageBitmap()` (en-US) 和 `XMLHttpRequest.send()` 都能夠同樣接受 `Blob` 以及 `File`。

請參考在網頁應用程式中使用本地檔案的更多細節與範例。

Blob

File建構式
---

`File()`

回傳一個新建構的 `File` 物件。

屬性
--

`File.lastModified` (en-US) Read only 

回值檔案的最後修改時間，為 UNIX epoch 毫秒（自西元 1970 年一月 1 日零時至今）。

`File.lastModifiedDate` (en-US) Read only  
已棄用

`File` 物件所代表之檔案的最後修改日期（`Date`）。

`File.name` Read only 

`File` 物件所代表之檔案的名稱。

`File.size` (en-US) Read only 

回傳檔案大小。

`File.webkitRelativePath` (en-US) Read only  
非標準

回傳相對於 `File` 的網址位置。

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

回傳檔案的 MIME 類型。

`File` 實作了 `Blob`，因此它也有以下可用屬性：

`File.size` (en-US) Read only 

回傳檔案大小（單位為位元組）。

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

回傳檔案的 MIME (en-US) 類型。

方法
--

*`File` 介面沒有定義任何方法，但繼承了 `Blob` 介面的方法：*

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

回傳新的 `Blob` 物件，包含 `Blob` 來源之指定位元組範圍的資料。

規範
--

| Specification |
| --- |
| File API # file-section |

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

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

### 實作備註

* In Gecko, you can use this API from within chrome code. See Using the DOM File API in chrome code for details. To use it from chrome code, JSM and Bootstrap scope, you have to import it using `Cu.importGlobalProperties(['File']);`
* Starting from Gecko 6.0, privileged code (such as extensions) can pass an `nsIFile` object to the DOM `File` constructor to specify the file to reference.
* Starting from Gecko 8.0, you can use `new File` to create `File` objects from XPCOM component code instead of having to instantiate the `nsIDOMFile` object directly. The constructor takes, in contrast to `Blob`, as second argument the filename. The filename can be any String.
```

new File(
  Array parts,
  String filename,
  BlobPropertyBag properties
);
```

* The following non-standard properties and methods were removed in Gecko 7: `File.fileName`, `File.fileSize` (en-US), `File.getAsBinary()`, `File.getAsDataURL()`, `File.getAsText(string encoding)` (Firefox bug 661876). Standard properties `File.name`, `Blob.size`, and methods on `FileReader` should be used instead.
參見
--

* 在網頁應用程式中使用本地檔案
* `FileReader`
* Using the DOM File API in chrome code (for privileged code running in Gecko, such as Firefox add-ons)
Network Information API
=======================

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

Network Information API 將提供系統連線的相關資訊，如使用者裝置的現有頻寬，或目前的連線狀態。根據使用者的連線情形，可進一步選擇高解析度或低解析度的內容。此完整的 API 另包含 domxref("Connection") 介面，以及 `Navigator` (en-US) 介面的單一屬性 ─ `Navigator.connection` (en-US)。

偵測連線變化
------

此範例將觀察使用者連線的變化。舉例來說，當使用者從高價位連線轉用低價位連線時，就會降低頻寬需求以避免連線費用暴增，並採用類似 Apps 受到警示的方法。


```js
var connection =
  navigator.connection || navigator.mozConnection || navigator.webkitConnection;

function updateConnectionStatus() {
  alert("Connection bandwidth: " + connection.bandwidth + " MB/s");
  if (connection.metered) {
    alert("The connection is metered!");
  }
}

connection.addEventListener("change", updateConnectionStatus);
updateConnectionStatus();
```

規範
--

| Specification |
| --- |
| Network Information API # networkinformation-interface |
| Network Information API # connection-attribute |

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

### api.NetworkInformation

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

### api.Navigator.connection

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

See also
--------

* Network Information API Specification
* 線上與離線事件
* `window.navigator.connection`
Fetch API
=========

Fetch API 提供了一個能獲取包含跨網路資源在的資源介面。它有點像我們所熟悉的 `XMLHttpRequest` ，但這個新的 API 提供了更強更彈性的功能。概念與應用
-----

Fetch 提供了 `Request` (en-US) 與 `Response` 物件，還有其他牽涉網路請求的通用定義。這能讓他們在需要的時候被使用到，不管是 service worker、Cache API、還是其他處理或更動請求回應的相類事物、或是任何需要產生有序化產生回應的用例（use case）。

它也提供了諸如 CORS 與 HTTP origin 標頭語意的分散定義，能取代分散的定義。

要發動請求並取得資源的話，請使用 `GlobalFetch.fetch` (en-US) 方法。他實作了數種介面，並指定了 `Window` (en-US) 與 `WorkerGlobalScope` (en-US)，使它可以在任何想獲取資源的環境中使用。

`fetch()` 方法有一個強制性的參數，就是要取得資源的網址。該方法會回傳一個不論請求成敗，都會 resolve 的 promise `回應`。你也能選擇性地使用第二個稱為 `init` 的物件參數（請參見 `Request` (en-US)）。

當 `Response` 檢索後，在請求體裡面會定義一些請求體為何，還有要如何處理的方法（請參見 `Body`）。

你也可以直接用 `Request()` (en-US) 與 `Response()` (en-US) 建構子來建立請求與回應，不過你不太可能直接使用他，反而更可能是以其他 API 行動的結果為形式存在。（例如來自 service worker 的 `FetchEvent.respondWith` (en-US)）

**備註：** 你可以在使用 Fetch深入理解 Fetch，並在Fetch 的基本概念 (en-US)文章內理解概念。

### 中斷一次 Fetch

各家瀏覽器已經開始加入 `AbortController` 與 `AbortSignal` (en-US) 介面（也就是 Abort API）的實驗性支援，讓 Fetch 和 XHR 這類的操作在完成前可以被中斷。詳情請參閱相關介面的文件。

Fetch 介面
--------

`fetch()` (en-US)

用於取得資源的 `fetch()` 方法。

`Headers` (en-US)

代表請求/回應標頭，讓你能 query 並針對結果不同，採取不同行動。

`Request` (en-US)

代表資源請求。

`Response`

代表資源請求的回應。

Fetch mixin
-----------

`Body`

提供請求/回應訊息體的相關方法，能宣告內容的類別為何，以及該如何處理。

規範
--

| Specification |
| --- |
| Fetch Standard # fetch-method |

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

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

參見
--

* 使用 Fetch
* ServiceWorker API (en-US)
* HTTP access control (CORS)
* HTTP
* Fetch polyfill
* Fetch 基本概念 (en-US)
PositionError
=============

**`PositionError`** 介面表示使用定位設備時發生錯誤的原因。

屬性
--

*`PositionError` 介面沒有繼承任何屬性*。

`PositionError.code` Read only 

回傳一個無符號整數（`unsigned short`）來表示錯誤碼。以下列出可能的值：

| 值 | 相對應的常數 | 描述 |
| --- | --- | --- |
| `1` | `PERMISSION_DENIED` | 取得地理資訊失敗，因為此頁面沒有獲取地理位置信息的權限。 |
| `2` | `POSITION_UNAVAILABLE` | 取得地理資訊失敗，因為至少有一個地理位置信息內的資訊回傳了錯誤。 |
| `3` | `TIMEOUT` | 取得地理資訊超過時限，利用`PositionOptions.timeout` 來定義取得地理資訊的時限。 |

`PositionError.message` Read only 

回傳一個可讀的 `DOMString` 來描述錯誤的詳細訊息。注意規格中指出此訊息是用來除錯而非直接顯示在使用者介面。

方法
--

**`PositionError` 介面沒有實作也沒有繼承任何方法**。

規格
--

| Specification |
| --- |
| Geolocation API # position\_error\_interface |

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

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

請參考
---

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

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

**Web Audio API** 可於 Web App 或網頁上操作並播放音訊檔案。

Web Audio API 是根據模組化路由 (Modular routing) 的概念所設計。所謂的模組化路由，即是以「**音訊節點** **(Audio nodes)**」**執行基本的音訊作業**，節點又互相連接而構成「音訊路由圖 (Audio routing graphs)」。在同一環境 (Audio context) 內，又可支援數個音源與多樣的聲道配置。此模組化設計可提供更高的靈活度，並能建立複雜的音訊函式與動態效果。

音訊節點均透過其輸出與輸入而相互連結。各個輸入/輸出均具備數個**聲道** **(Channel)**，以構成特定的音訊配置。但目前已可支援單聲道、立體聲、四聲道、5.1 聲道等配置，並支援其他的離散配置。

音訊有多種來源。可能由特定的音訊節點 (如震盪器、自訂函式，甚或簡易的資料陣列) 直接在 JavaScript 中產生。音源除了可連至 HTML 媒體元素 (如 element is used to embed video content in an HTML or XHTML document.">`<video>` (en-US) 或 element is used to represents sound content in documents. Added as part of HTML5, it may contain several audio sources, represented using the src attribute or the <source> element; the browser will choose the most suitable one. Fallback c">`<audio>` (en-US))，亦可能來自於 WebRTC (en-US) 的 `MediaStream` (en-US) (本端裝置的相機或遠方電腦)。

特定音訊事件發生的時間點，均達到極高的精確度與極低的潛時，因此亦可用以詳細定義鼓類機器或音序器 (Sequencer) 所需的事件。

Web Audio API 亦可控制音訊的空間定位 (Spatialized) 作業：透過 source-listener 模型架構的系統，進而控制所要使用的左右相位 (Panning\*，*聲音放置於左右喇叭之間形成的立體音場中，以產生出空間感) 模*型\*，進而自動處理因距離遠近所產生的衰減，或是由於音源/聽者移動所發生的都卜勒移頻 (Doppler shift)。

參考
--

* `AnalyserNode` (en-US)
* `AudioBuffer` (en-US)
* `AudioBufferSourceNode` (en-US)
* `AudioContext` (en-US)
* `AudioDestinationNode` (en-US)
* `AudioListener` (en-US)
* `AudioNode` (en-US)
* `AudioParam` (en-US)
* `audioprocess` (en-US) (event)
* `AudioProcessingEvent` (en-US)
* `BiquadFilterNode` (en-US)
* `ChannelMergerNode` (en-US)
* `ChannelSplitterNode` (en-US)
* `complete` (en-US) (event)
* `ConvolverNode` (en-US)
* `DelayNode` (en-US)
* `DynamicsCompressorNode` (en-US)
* `ended` (en-US) (event)
* `GainNode`
* `MediaElementAudioSourceNode` (en-US)
* `MediaStreamAudioDestinationNode` (en-US)
* `MediaStreamAudioSourceNode` (en-US)
* `OfflineAudioCompletionEvent` (en-US)
* `OfflineAudioContext` (en-US)
* `OscillatorNode` (en-US)
* `PannerNode` (en-US)
* `ScriptProcessorNode` (en-US)
* `WaveShaperNode` (en-US)
線上教學
----

* 使用 Web Audio API
* Getting Started with the Web Audio API (僅說明 WebKit-only 的非標準建置)
* 混合定位音訊 (Positional Audio) 與 WebGL
* 以 Web Audio API 開發遊戲音訊
* 將 webkitAudioContext 程式碼移植為標準的 AudioContext (en-US)
規格
--

| Specification |
| --- |
| Web Audio API # AudioContext |

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

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

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

**`PaymentRequest`** 介面是 Payment Request API 的主要切入點，它能讓網頁或 app 接受終端用戶的付款。

建構子
---

`PaymentRequest()` (en-US) Secure context

建立新的 `PaymentRequest` 物件。

屬性
--

`PaymentRequest.id` (en-US) Read only Secure context

個別 `PaymentRequest` 的唯一標識符（unique identifier），可透過 `details.id` 設定之。若尚未指定，預設為 UUID。

`PaymentRequest.shippingAddress` (en-US) Read only  Secure context

若透過付款設定（payment options）請求的話，回傳用戶指定的運送地址，以便計算運輸事宜。只有在呼叫的建構子 `requestShipping` flag 為 true 時，此屬性才能作動。另外，部份瀏覽器會出於隱私上的理由而只節錄部分地址，除非用戶表示交易手續即將完成（例如按下「付款」鈕）。

`PaymentRequest.shippingOption` (en-US) Read only  Secure context

回傳的運送選項的標識符。只有在呼叫的建構子 `requestShipping` flag 為 true 時，此屬性才能作動。

`PaymentRequest.shippingType` (en-US) Read only  Secure context

回傳用於完成交易的運送類型。可以是 `shipping`, `delivery`, `pickup`, 或在建構子未提供的情形下：`null`。

### 事件處理器

`PaymentRequest.onshippingaddresschange` (en-US) Secure context

用戶修改運送地址時觸發之。

`PaymentRequest.onshippingoptionchange` (en-US) Secure context

用戶修改運送選項時觸發之。

`PaymentRequest.onpaymentmethodchange` (en-US) Secure context

針對付款方法（如 Apple Pay），用戶修改支付方式時觸發之，比方說從信用卡改為簽帳卡。

`PaymentRequest.onmerchantvalidation` (en-US) Secure context

針對付款方法（如 Apple Pay），本事件會呼叫 `merchantvalidation` 事件，在用戶代理要求驗證付款商家或供應商是否合法時觸發之。

方法
--

`PaymentRequest.canMakePayment()` (en-US) Secure context

在呼叫 `show()` 前告訴 `PaymentRequest` 物件能不能付款。

`PaymentRequest.show()` (en-US) Secure context

讓用戶代理開始付款請求的用戶交互。

`PaymentRequest.abort()` (en-US) Secure context

讓用戶代理結束付款請求並刪除可能顯示的任何用戶界面。

規範
--

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

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

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

Channel Messaging API 讓同屬一份文件不同瀏覽環境的兩份程式腳本 (如兩個 IFrame、或主頁面和 IFrame、文件和 `SharedWorker` (en-US)、或兩個 worker)，也能夠經由雙向 channel (通道) 兩端的 port (連接阜) 直接傳遞訊息互相溝通。

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

Channel 訊息概念與使用情境
-----------------

`MessageChannel()` (en-US) 建構子產生 channel， 一但生成了，便可以存取 channel 兩端的 port: `MessageChannel.port1` (en-US) 和 `MessageChannel.port2` (en-US)，這兩個屬性會回傳 domxref("MessagePort")}} objects.)。建立 channel 的 app 使用 port1，另一端用 port2，利用 `window.postMessage` (en-US) 方法帶入參數，向 port2 傳送訊息以及移轉物件 (這裡也就是只 port)。

一但可移轉物件被移轉後，前任擁有者便失去所有權，例如當 port 移轉出去後，原本持有該 port 的環境便不能再使用之。目前可移轉物件只有 `ArrayBuffer` 以及 `MessagePort` (en-US)。

另一端的瀏覽環境則藉由 `MessagePort.onmessage` (en-US) 監聽訊息、從訊息事件物件的 data 屬性擷取訊息資料，然後再呼叫 `MessagePort.postMessage` (en-US) 回傳訊息。

如果想關閉訊息 channel，則呼叫 `MessagePort.close` (en-US)。

更多 API 使用細節請見 Using channel messaging (en-US)。

Channel 訊息介面
------------

`MessageChannel` (en-US)

生成一個新的 message channel。

`MessagePort` (en-US)

控制 port，用來傳送和監聽訊息。

`PortCollection`

`MessagePort`s 陣列，實驗性質方案；用來同時廣播到多個訊息 port。

範例
--

* Github 上有 channel messaging basic demo (run it live too)，一個簡單示範主頁和 `<iframe>` (en-US) 間的訊息溝通。
* 還有 multimessaging demo (run this live)，較為複雜的例子。
規範
--

| Specification |
| --- |
| HTML Standard # channel-messaging |

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

### api.MessageChannel

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

### api.MessagePort

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

延伸閱讀
----

* Using channel messaging (en-US)
* Web Workers API (en-US)
* Broadcast Channel API (en-US)
DragEvent
=========

**`DragEvent`** 介面是一種 `DOM event`，定義了拖放操作時產生的事件物件。使用者藉由把指標裝置 (例如滑鼠) 放到有效區域並拖移到另一個新的位置 ( 如另外一個 DOM 元素 ) 來開始一個拖動的動作。 而應用程式可以自由地決定互動的方式來達到符合該應用程式的使用情境。

This interface inherits properties from `MouseEvent` (en-US) and `Event`.

屬性
--

`DragEvent.dataTransfer` Read only 

The data that is transferred during a drag and drop interaction.

建構式
---

Although this interface has a constructor, it is not possible to create a useful DataTransfer object from script, since `DataTransfer` (en-US) objects have a processing and security model that is coordinated by the browser during drag-and-drops.

`DragEvent()` (en-US)

Creates a synthetic and untrusted DragEvent.

事件類型
----

`drag` (en-US)

在『被選擇的物件』被拖曳時觸發。

`dragend` (en-US)

在『被選擇的物件』結束拖曳時觸發 (就是放開滑鼠鍵、或按下 Esc 鍵時)。

`dragenter` (en-US)

當『被選擇的物件』被拖曳到『可以當目標的物件』時, 在『進入』該目標物件上方的瞬間觸發。注意, 不是『被選擇的物件』觸發此事件, 而是『可以當目標的物件』。

`dragleave` (en-US)

當『被選擇的物件』被拖曳到『可以當目標的物件』時, 在『離開』該目標物件上方的瞬間觸發。注意, 不是『被選擇的物件』觸發此事件, 而是『可以當目標的物件』。

`dragover` (en-US)

當『被選擇的物件』被拖曳到『可以當目標的物件』的上方時觸發 (頻率大約每秒數次)。注意, 不是『被選擇的物件』觸發此事件, 而是『可以當目標的物件』 。

`dragstart` (en-US)

在『被選擇的物件』開始拖曳時觸發。

`drop` (en-US)

當『被選擇的物件』被拖曳、放到『目標物件』時觸發。注意, 不是『被選擇的物件』觸發此事件, 而是『目標物件』。

通用事件處理器
-------

`GlobalEventHandlers.ondrag` (en-US)

A `global event handler` for the `drag` (en-US) event.

`GlobalEventHandlers.ondragend` (en-US)

A `global event handler` for the `dragend` (en-US) event.

`GlobalEventHandlers.ondragenter` (en-US)

A `global event handler` for the `dragenter` (en-US) event.

`GlobalEventHandlers.ondragleave` (en-US)

A `global event handler` for the `dragleave` (en-US) event.

`GlobalEventHandlers.ondragover` (en-US)

A `global event handler` for the `dragover` (en-US) event.

`GlobalEventHandlers.ondragstart` (en-US)

A `global event handler` for the `dragstart` (en-US) event.

`GlobalEventHandlers.ondrop` (en-US)

A `global event handler` for the `drop` (en-US) event.

範例
--

An Example of each property, constructor, event type and global event handlers is included in their respective reference page.

規範
--

| Specification |
| --- |
| HTML Standard # the-dragevent-interface |

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

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

參見
--

* HTML 拖放 API
* 拖曳操作
* 推薦拖曳類型 (en-US)
* 拖拽和放置多個項目
* DataTransfer test - Paste or Drag
Storage
=======

Web Storage API (en-US) 中的 **`Storage`** 介面提供了存取特定 domain session 及本機儲存的方法。舉例而言，它能夠對存取的資料進行新增、刪除、修改，

在操作上，如果是對象是 domain session storage ，會呼叫 `Window.sessionStorage` 。而若是 local storage，則呼叫 `Window.localStorage` 。

屬性
--

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

返回一數字，代表儲存在 `Storage` 中的物件的數量。

方法
--

`Storage.key()` (en-US)

當傳入一數字 `n`, 會返回 storage 裡第 n 個值的 key 值。

`Storage.getItem()` (en-US)

當傳入一 key 值, 會返回 storage 裡此 key 值對應的 value 。

`Storage.setItem()` (en-US)

當傳入 key 及 value 的值, 會在 storage 裡新增此 key 及 value 值，若 key 已存在，則會把值更新成傳入的 value。

`Storage.removeItem()` (en-US)

當傳入一 key 值, 會把此 key 從 storage 裡刪除。

`Storage.clear()` (en-US)

執行此方法，會刪除所有在 storage 裡的 key。

範例
--

在這裡，我們藉由呼叫 `localStorage` 來存取 `Storage` 物件，首先使用 `!localStorage.getItem('bgcolor')` 來確認 storage 裡是否有項目存在。

如果有，則執行函示 `setStyles()` ，這個函示使用 `Storage.getItem()` (en-US) 取得 storage 的值，並且用這些值更新頁面樣式 。

如果沒有，便執行另一個函示 `populateStorage()`，他使用 `Storage.setItem()` (en-US) 先設定 storage 項目的值，然後才執行`setStyles()`。


```js
if (!localStorage.getItem("bgcolor")) {
  populateStorage();
}
setStyles();

function populateStorage() {
  localStorage.setItem("bgcolor", document.getElementById("bgcolor").value);
  localStorage.setItem("font", document.getElementById("font").value);
  localStorage.setItem("image", document.getElementById("image").value);
}

function setStyles() {
  var currentColor = localStorage.getItem("bgcolor");
  var currentFont = localStorage.getItem("font");
  var currentImage = localStorage.getItem("image");

  document.getElementById("bgcolor").value = currentColor;
  document.getElementById("font").value = currentFont;
  document.getElementById("image").value = currentImage;

  htmlElem.style.backgroundColor = "#" + currentColor;
  pElem.style.fontFamily = currentFont;
  imgElem.setAttribute("src", currentImage);
}
```


**備註：** 想要看這個範例完整運行，可以參考我們的 Web Storage Demo.

規範
--

| Specification |
| --- |
| HTML Standard # storage |

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

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

See also
--------

* Using the Web Storage API (en-US)
* `Window.localStorage`
* `Window.sessionStorage`
* `CacheStorage` (en-US)