1. 8 ウェブアプリケーションAPI
    1. 8.1 スクリプティング
      1. 8.1.1 導入
      2. 8.1.2 エージェントおよびエージェントクラスター
        1. 8.1.2.1 JavaScriptエージェント形式化との統合
        2. 8.1.2.2 JavaScriptエージェントクラスター形式化との統合
      3. 8.1.3 スクリプト処理モデル
        1. 8.1.3.1 ランタイムスクリプトエラー
        2. 8.1.3.2 未処理のプロミス拒否
      4. 8.1.4 Module specifier resolution
        1. 8.1.4.1 The resolution algorithm
        2. 8.1.4.2 Import maps
        3. 8.1.4.3 Module-related host hooks
      5. 8.1.5 Event loops
      6. 8.1.6 Events
        1. 8.1.6.1 Event handlers
        2. 8.1.6.2 Event handlers on elements, Document objects, and Window objects
    2. 8.2 WindowOrWorkerGlobalScopeミックスイン
    3. 8.3 Base64ユーティリティメソッド

8 ウェブアプリケーションAPI

8.1 スクリプティング

8.1.1 導入

様々なメカニズムが文書のコンテキストで実行するよう著者が提供する実行可能コードを引き起こすかもしれない。これらのメカニズムは以下を含むが、おそらく以下に限定されない:

8.1.2 エージェントおよびエージェントクラスター

8.1.2.1 JavaScriptエージェント形式化との統合

JavaScriptは、エージェントの概念を定義する。この節は、その言語レベルの概念をウェブプラットフォームにマッピングする。

概念上、エージェントの概念は、JavaScriptコードが実行される、アーキテクチャに依存しない理想的な"スレッド"である。そのようなコードには、互いに同期的にアクセスできる複数のグローバル/レルムが含まれる可能性があるため、単一の実行スレッドで実行する必要がある。

次の種類のエージェントがウェブプラットフォームに存在する:

類似の生成元ウィンドウエージェント

直接、またはdocument.domainのいずれかを使用して、互いに到達する可能性のある様々なWindowオブジェクトを含む。

網羅的なエージェントクラスターis origin-keyedがtrueである場合、すべてのWindowオブジェクトは同一生成元になり、互いに直接到達することができ、document.domainは処理しない。

同一生成元である2つの Windowオブジェクトは、それぞれが独自のブラウジングコンテキストグループ内にある場合など、異なる類似の生成元ウィンドウエージェント内に存在できる。

専用ワーカーエージェント

単一のDedicatedWorkerGlobalScopeを含む。

共有ワーカーエージェント

単一のSharedWorkerGlobalScopeを含む。

サービスワーカーエージェント

単一のServiceWorkerGlobalScopeを含む。

ワークレットエージェント

単一のWorkletGlobalScopeオブジェクトを含む。

特定のワークレットは複数のレルムを設定できるが、各レルムは他のレルムとは独立して同時にコードを実行できるため、そのような各レルムには独自のエージェントが必要である。

共有および専用ワーカーエージェントのみが、JavaScript Atomics APIの使用を潜在的にブロックすることを可能にする。

8.1.2.2 JavaScriptエージェントクラスター形式化との統合

JavaScriptはエージェントクラスターの概念も定義する。この標準は、作成時にエージェントを適切に配置することにより、ウェブプラットフォームにマッピングする。

エージェントクラスターの概念は、JavaScriptメモリーモデルを定義するために重要であり、特にどのエージェント間でSharedArrayBufferオブジェクトのバッキングデータを共有できるかが重要である。

概念上、エージェントクラスターの概念は、複数の"スレッド"(エージェント)をグループ化する、アーキテクチャに依存しない、理想的な"プロセス境界"である。仕様で定義されるエージェントクラスターは、一般に、ユーザーエージェントに実装される実際のプロセス境界よりも制限的である。これらの理想的な分割を仕様レベルで強制することにより、ユーザーエージェントのプロセスモデルが変化、変更しても、ウェブ開発者は共有メモリーに関して相互運用可能な動作を確認することを保証する。

次のグローバルオブジェクトのペアは、それぞれ同じエージェントクラスター内にあるため、SharedArrayBufferインスタンスを使用して互いにメモリーを共有できる:

次のグローバルオブジェクトのペアは、同じエージェントクラスター内には存在しないため、メモリーを共有することはできない:

8.1.3 スクリプト処理モデル

8.1.3.1 ランタイムスクリプトエラー

reportError

Support in all current engines.

Firefox93+Safari15.4+Chrome95+
Opera?Edge95+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
self.reportError(e)

未処理の例外と同じ方法で、指定された値eのグローバルオブジェクトにerrorイベントをディスパッチする。

さまざまなシナリオで、ユーザーエージェントはWindowerrorイベントを発火させることによって例外を報告できる。 このイベントがキャンセルされない場合、エラーは処理されていないと見なされ、開発者コンソールに報告できる。

8.1.3.2 未処理のプロミス拒否

Window/rejectionhandled_event

Support in all current engines.

Firefox69+Safari11+Chrome49+
Opera?Edge79+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS11.3+Chrome Android?WebView Android?Samsung Internet?Opera Android?

同期ランタイムスクリプトエラーに加えて、スクリプトは非同期のプロミス拒否を経験してもよく、unhandledrejectionおよびrejectionhandledイベントで追跡される。

8.1.4 Module specifier resolution

8.1.4.1 The resolution algorithm

The resolve a module specifier algorithm is the primary entry point for converting module specifier strings into URLs. When no import maps are involved, it is relatively straightforward, and reduces to resolving a URL-like module specifier.

When there is a non-empty import map present, the behavior is more complex. It checks candidate entries from all applicable module specifier maps, from most-specific to least-specific scopes (falling back to the top-level unscoped imports), and from most-specific to least-specific prefixes.

In the end, if no successful resolution is found via any of the candidate module specifier maps, resolve a module specifier will throw an exception. Thus the result is always either a URL or a thrown exception.

8.1.4.2 Import maps

An import map allows control over module specifier resolution. Import maps are delivered via inline script elements with their type attribute set to "importmap", and with their child text content containing a JSON representation of the import map.

Only one import map is processed per Document. After the first import map is seen, others will be ignored, with their corresponding script elements generating error events. Similarly, once any modules have been imported, e.g., via import() expressions or script elements with their type attribute set to "module", further import maps will be ignored.

These restrictions, as well as the lack of support for external import maps, are in place to keep the initial version of the feature simple. They might be lifted over time as implementer bandwidth allows.

The simplest use of import maps is to globally remap a bare module specifier:

{
  "imports": {
    "moment": "/node_modules/moment/src/moment.js"
  }
}

This enables statements like import moment from "moment"; to work, fetching and evaluating the JavaScript module at the /node_modules/moment/src/moment.js URL.

An import map can remap a class of module specifiers into a class of URLs by using trailing slashes, like so:

{
  "imports": {
    "moment/": "/node_modules/moment/src/"
  }
}

This enables statements like import localeData from "moment/locale/zh-cn.js"; to work, fetching and evaluating the JavaScript module at the /node_modules/moment/src/moment/locale/zh-cn.js URL. Such trailing-slash mappings are often combined with bare-specifier mappings, e.g.

{
  "imports": {
    "moment": "/node_modules/moment/src/moment.js",
    "moment/": "/node_modules/moment/src/"
  }
}

so that both the "main module" specified by "moment" and the "submodules" specified by paths such as "moment/locale/zh-cn.js" are available.

Bare specifiers are not the only type of module specifiers which import maps can remap. "URL-like" specifiers, i.e., those that are either parseable as absolute URLs or start with "/", "./", or "../", can be remapped as well:

{
  "imports": {
    "https://cdn.example.com/vue/dist/vue.runtime.esm.js": "/node_modules/vue/dist/vue.runtime.esm.js",
    "/js/app.mjs": "/js/app-8e0d62a03.mjs",
    "../helpers/": "https://cdn.example/helpers/"
  }
}

Note how the URL to be remapped, as well as the URL being mapped to, can be specified either as absolute URLs, or as relative URLs starting with "/", "./", or "../". (They cannot be specified as relative URLs without those starting sigils, as those help distinguish from bare module specifiers.) Also note how the trailing slash mapping works in this context as well.

Such remappings operate on the post-canonicalization URL, and do not require a match between the literal strings supplied in the import map key and the imported module specifier. So for example, if this import map was included on https://example.com/app.html, then not only would import "/js/app.mjs" be remapped, but so would import "./js/app.mjs" and import "./foo/../js/app.mjs".

All previous examples have globally remapped module specifiers, by using the top-level "imports" key in the import map. The top-level "scopes" key can be used to provide localized remappings, which only apply when the referring module matches a specific URL prefix. たとえば:

{
  "scopes": {
    "/a/" : {
      "moment": "/node_modules/moment/src/moment.js"
    },
    "/b/" : {
      "moment": "https://cdn.example.com/moment/src/moment.js"
    }
  }
}

With this import map, the statement import "moment" will have different meanings depending on which referrer script contains the statement:

A typical usage of scopes is to allow multiple versions of the "same" module to exist in a web application, with some parts of the module graph importing one version, and other parts importing another version.

Scopes can overlap each other, and overlap the global "imports" specifier map. At resolution time, scopes are consulted in order of most- to least-specific, where specificity is measured by sorting the scopes using the code unit less than operation. So, for example, "/scope2/scope3/" is treated as more specific than "/scope2/", which is treated as more specific than the top-level (unscoped) mappings.

The following import map illustrates this:

{
  "imports": {
    "a": "/a-1.mjs",
    "b": "/b-1.mjs",
    "c": "/c-1.mjs"
  },
  "scopes": {
    "/scope2/": {
      "a": "/a-2.mjs"
    },
    "/scope2/scope3/": {
      "b": "/b-3.mjs"
    }
  }
}

This results in the following resolutions (using relative URLs for brevity):

Specifier
"a""b""c"
Referrer/scope1/r.mjs/a-1.mjs/b-1.mjs/c-1.mjs
/scope2/r.mjs/a-2.mjs/b-1.mjs/c-1.mjs
/scope2/scope3/r.mjs/a-2.mjs/b-3.mjs/c-1.mjs

The child text content of a script element representing an import map must match the following import map authoring requirements:

A valid module specifier map is a JSON object that meets the following requirements:

8.1.4.3 Module-related host hooks

JavaScript仕様では、モジュールの構文と、その処理モデルのホストに依存しない部分を定義する。この仕様は、残りの処理モデルを定義する:type属性が"module"に設定されたscript要素を介して、モジュールがどのようにフェッチされ、解決され、実行されるか。[JAVASCRIPT]

JavaScript仕様は"スクリプト"対"モジュール"の観点から話すが、どちらもscript要素を使用しているため、一般にこの仕様はクラシックスクリプトモジュールスクリプトの観点から話す。

modulePromise = import(specifier)

指定子によって識別されるモジュールスクリプトのモジュール名前空間オブジェクトのプロミスを返す。これは、importステートメントフォームを静的に使用する代わりに、実行時にモジュールスクリプトを動的にインポートを可能にする。The specifier will be resolved relative to the active script.

不正な指定子が指定された場合、または結果のモジュールグラフのフェッチまたは評価中に失敗が発生した場合、返されたプロミスは拒否される。

この構文は、クラシックスクリプトモジュールスクリプトの両方で使用できる。よって、クラシックスクリプトの世界からモジュールスクリプトの世界への架け橋となる。

url = import.meta.url

アクティブモジュールスクリプトベースURLを返す。

この構文は、モジュールスクリプト内でのみ使用できる。

url = import.meta.resolve(specifier)

Returns specifier, resolved relative to the active script. That is, this returns the URL that would be imported by using import(specifier).

Throws a TypeError exception if an invalid specifier is given.

この構文は、モジュールスクリプト内でのみ使用できる。

モジュールマップは、インポートされたモジュールスクリプトがDocumentまたはワーカーごとに1回だけフェッチ、解析、および評価されることを保証するために使用される。

モジュールマップは(URL、モジュールタイプ)によってキー設定されるため、次のコードはモジュールマップに3つの個別のエントリーを作成する。これは、3つの異なる(URL、モジュールタイプ)タプル(すべて"javascript"タイプ)になるためである:

import "https://example.com/module.mjs";
import "https://example.com/module.mjs#map-buster";
import "https://example.com/module.mjs?debug=true";

つまり、URLクエリーおよびフラグメントは、を変更して、モジュールマップに個別のエントリーを作成するために変化させることができ、それらは無視されない。よって、3つの別々のフェッチおよび3つの別々のモジュール評価が実行される。

対照的に、次のコードは、モジュールマップに単一のエントリーのみを作成する。これは、これらの入力にURLパーサーを適用した後、結果のURLレコードが等しくなるためである。

import "https://example.com/module2.mjs";
import "https:example.com/module2.mjs";
import "https://///example.com\\module2.mjs";
import "https://example.com/foo/../module2.mjs";

そのため、この2番目の例では、1つのフェッチと1つのモジュール評価のみが発生する。

この動作は、共有ワーカーが解析されたコンストラクターURLによって入力される方法と同じであることに注意する。

モジュールタイプはまた、モジュールマップキーの一部であるため、次のコードはモジュールマップに2つの別個のエントリーを作成する(タイプは最初の"javascript"と2番目の"css"である):

<script type=module>
  import "https://example.com/module";
</script>
<script type=module>
  import "https://example.com/module" assert { type: "css" };
</script>

これにより、2つの別々のフェッチと2つの別々のモジュール評価が実行される可能性がある。これは、同じ(referencingScriptOrModule, moduleRequest.[[Specifier]])ペアを使用したHostResolveImportedModuleへの各呼び出しが同じモジュールレコードを返さなければならないことを示すインポートアサーション仕様によって推奨される(ただし必須ではない)制約の故意の違反である。 [JSIMPORTASSERTIONS]

実際には、まだ指定されていないメモリーキャッシュ(issue #6110を参照)のため、リソースはWebKitおよびBlinkベースのブラウザーで1回のみフェッチしてもよい。さらに、すべてのモジュールタイプが相互に排他的である限り、単一のモジュールスクリプトをフェッチする際のモジュールタイプチェックは、少なくとも1つのインポートで失敗するため、最大で1つのモジュール評価が行われる。

モジュールマップキーにタイプを含める目的は、タイプアサーションが間違っているインポートが、同じ指定子の異なるインポートを妨げないようにすることであるが、タイプが正しい場合は成功しない。

JavaScriptモジュールスクリプトは、別のJavaScriptモジュールからインポートする場合のデフォルトのインポートタイプである。つまり、importステートメントにtypeインポートアサーションがない場合、インポートされたモジュールスクリプトのタイプはJavaScriptになる。typeインポートアサーションをもつimportステートメントを使用してJavaScriptリソースをインポートしようとすると、失敗する:

<script type="module">
    // All of the following will fail, assuming that the imported .mjs files are served with a
    // JavaScript MIME type. JavaScript module scripts are the default and cannot be imported with
    // any import type assertion.
    import foo from "./foo.mjs" assert { type: "javascript" };
    import foo2 from "./foo2.mjs" assert { type: "js" };
    import foo3 from "./foo3.mjs" assert { type: "" };
    await import("./foo4.mjs", { assert: { type: null } });
    await import("./foo5.mjs", { assert: { type: undefined } });
</script>

8.1.5 Event loops

イベント、ユーザーインタラクション、スクリプト、レンダリング、ネットワーキングなどを調整するために、ユーザーエージェントは、この節で説明するイベントループを使用しなければならない。各エージェントには、イベントループが関連付けられており、これはそのエージェントに特有である。

類似の生成元ウィンドウエージェントイベントループは、ウィンドウイベントループとして知られる。 専用ワーカーエージェント共有ワーカーエージェント、またはサービスワーカーエージェントイベントループは、ワーカーイベントループとして知られる。そして、ワークレットエージェントイベントループは、ワークレットイベントループとして知られる。

イベントループは必ずしも実装スレッドに対応しているとは限らない。たとえば、複数のウィンドウイベントループを1つのスレッドで協調的にスケジュールできる。

しかし、[[CanBlock]]をtrueに設定して割り当てられたさまざまなワーカーエージェントの場合、JavaScript仕様は、フォワードプログレスに関する要件を設定し、これは、これらのケースでエージェントごとの専用スレッドを要求することになる。

8.1.6 Events

8.1.6.1 Event handlers

Events/Event_handlers

多くのオブジェクトは、指定したイベントハンドラーを持つことができる。これは、指定されたオブジェクトの非キャプチャイベントリスナーとして機能する。[DOM]

イベントハンドラーは2つの方法で公開される。

1つ目の方法は、すべてのイベントハンドラーに共通する、イベントハンドラーIDL属性としてである。

2つ目の方法は、イベントハンドラーコンテンツ属性としてである。HTML要素のイベントハンドラーおよびWindowオブジェクトのイベントハンドラーの一部は、この方法で公開される。

これら2つの方法の両方で、イベントハンドラー名前を通して公開される。名前は、常に"on"で始まり、その後にハンドラーの対象となるイベントの名前が続く文字列である。


ほとんどの場合、イベントハンドラーを公開するオブジェクトは、対応するイベントリスナーが追加されるオブジェクトと同じである。しかし、body要素およびframeset要素は、要素のWindowオブジェクト(存在する場合)に作用するいくつかのイベントハンドラーを公開する。いずれの場合も、イベントハンドラーがそのイベントハンドラーターゲットに作用するオブジェクトを呼び出す。


イベントハンドラーIDL属性は、特定のイベントハンドラーに対するIDL属性である。IDL属性の名前は、イベントハンドラー名前と同じである。


イベントハンドラーコンテンツ属性は、特定のイベントハンドラーに対するコンテンツ属性である。コンテンツ属性の名前は、イベントハンドラー名前と同じである。

イベントハンドラーコンテンツ属性が指定される場合、解析されるときに、自動セミコロン挿入後のFunctionBody生成物と一致する、妥当なJavaScriptコードを含まなければならない。

この例は、イベントリスナーが呼び出される順序を示す。この例でボタンがユーザーによってクリックされる場合、ページはそれぞれテキスト"ONE"、"TWO"、"THREE"、"FOUR"をもつ4つの警告を表示する。

<button id="test">Start Demo</button>
<script>
 var button = document.getElementById('test');
 button.addEventListener('click', function () { alert('ONE') }, false);
 button.setAttribute('onclick', "alert('NOT CALLED')"); // event handler listener is registered here
 button.addEventListener('click', function () { alert('THREE') }, false);
 button.onclick = function () { alert('TWO'); };
 button.addEventListener('click', function () { alert('FOUR') }, false);
</script>

しかし、次の例では、イベントハンドラーは、最初のアクティブ化の後(およびイベントリスナーが削除された後)、後で再アクティブにされる前に非アクティブにされる。このページには、"ONE"、"TWO"、"THREE"、"FOUR"、"FIVE"の順に5つのアラートが表示される。

<button id="test">Start Demo</button>
<script>
 var button = document.getElementById('test');
 button.addEventListener('click', function () { alert('ONE') }, false);
 button.setAttribute('onclick', "alert('NOT CALLED')"); // event handler is activated here
 button.addEventListener('click', function () { alert('TWO') }, false);
 button.onclick = null;                                 // but deactivated here
 button.addEventListener('click', function () { alert('THREE') }, false);
 button.onclick = function () { alert('FOUR'); };       // and re-activated here
 button.addEventListener('click', function () { alert('FIVE') }, false);
</script>

EventHandlerコールバック関数型は、イベントハンドラーに対して使用されるコールバックを表す。

JavaScriptにおいて、すべてのFunctionオブジェクトがこのインターフェイスを実装する。

たとえば、次の文書断片で:

<body onload="alert(this)" onclick="alert(this)">

文書がロードされるときに"[object Window]"という警告を、ページでユーザーが何かをクリックするときはいつでも"[object HTMLBodyElement]"という警告を流す。

関数の戻り値は、イベントがキャンセルされるかどうかに影響する。戻り値がfalseの場合、イベントはキャンセルされる。

プラットフォームには、歴史的な理由から2つの例外がある:

歴史的な理由により、onerrorハンドラーは、異なる引数を持つ。

window.onerror = (message, source, lineno, colno, error) => {};

同様に、onbeforeunloadハンドラーには異なる戻り値がある。文字列にキャストされる

8.1.6.2 Event handlers on elements, Document objects, and Window objects

以下は、イベントハンドラーコンテンツ属性イベントハンドラーIDL属性の両方として、すべてのHTML要素でサポートされるイベントハンドラー(およびそれに対応するイベントハンドラーイベント型)である。イベントハンドラーIDL属性として、すべてのDocumentおよびWindowオブジェクトでサポートされる:

イベントハンドラーイベントハンドラーイベント型
onabort

HTMLMediaElement/abort_event

Support in all current engines.

Firefox9+Safari3.1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
abort
onauxclick

Element/auxclick_event

Firefox53+SafariNoChrome55+
Opera?Edge79+
Edge (Legacy)?Internet ExplorerNo
Firefox Android53+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
auxclick
onbeforeinputbeforeinput
onbeforematchbeforematch
oncancel

HTMLDialogElement/cancel_event

Support in all current engines.

Firefox98+Safari15.4+Chrome37+
Opera?Edge79+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome AndroidNoWebView Android?Samsung Internet?Opera Android?
cancel
oncanplay

HTMLMediaElement/canplay_event

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
canplay
oncanplaythrough

HTMLMediaElement/canplaythrough_event

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
canplaythrough
onchange

HTMLElement/change_event

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera9+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+
change
onclick

Element/click_event

Support in all current engines.

Firefox6+Safari3+Chrome1+
Opera11.6+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android6+Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
click
oncloseclose
oncontextlostcontextlost
oncontextmenucontextmenu
oncontextrestoredcontextrestored
oncuechange

HTMLTrackElement/cuechange_event

Support in all current engines.

Firefox68+Safari10+Chrome32+
Opera19+Edge79+
Edge (Legacy)14+Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android4.4.3+Samsung Internet?Opera Android19+
cuechange
ondblclick

Element/dblclick_event

Support in all current engines.

Firefox6+Safari3+Chrome1+
Opera11.6+Edge79+
Edge (Legacy)12+Internet Explorer8+
Firefox Android6+Safari iOS1+Chrome AndroidNoWebView Android?Samsung Internet?Opera Android12.1+
dblclick
ondragdrag
ondragenddragend
ondragenterdragenter
ondragleavedragleave
ondragoverdragover
ondragstartdragstart
ondropdrop
ondurationchange

HTMLMediaElement/durationchange_event

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
durationchange
onemptied

HTMLMediaElement/emptied_event

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
emptied
onended

HTMLMediaElement/ended_event

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
ended
onformdataformdata
oninput

HTMLElement/input_event

Support in all current engines.

Firefox6+Safari3.1+Chrome1+
Opera11.6+Edge79+
Edge (Legacy)NoInternet Explorer🔰 9+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12+
input
oninvalidinvalid
onkeydown

Element/keydown_event

Support in all current engines.

Firefox6+Safari1.2+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
keydown
onkeypresskeypress
onkeyup

Element/keyup_event

Support in all current engines.

Firefox6+Safari1.2+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
keyup
onloadeddata

HTMLMediaElement/loadeddata_event

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
loadeddata
onloadedmetadata

HTMLMediaElement/loadedmetadata_event

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
loadedmetadata
onloadstart

HTMLMediaElement/loadstart_event

Support in all current engines.

Firefox6+Safari4+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
loadstart
onmousedown

Element/mousedown_event

Support in all current engines.

Firefox6+Safari4+Chrome2+
Opera11.6+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+
mousedown
onmouseenter

Element/mouseenter_event

Support in all current engines.

Firefox10+Safari7+Chrome30+
Opera?Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android?
mouseenter
onmouseleave

Element/mouseleave_event

Support in all current engines.

Firefox10+Safari7+Chrome30+
Opera?Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android?
mouseleave
onmousemove

Element/mousemove_event

Support in all current engines.

Firefox6+Safari4+Chrome2+
Opera11.6+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+
mousemove
onmouseout

Element/mouseout_event

Support in all current engines.

Firefox6+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+
mouseout
onmouseover

Element/mouseover_event

Support in all current engines.

Firefox6+Safari4+Chrome2+
Opera9.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android10.1+
mouseover
onmouseup

Element/mouseup_event

Support in all current engines.

Firefox6+Safari4+Chrome2+
Opera11.6+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+
mouseup
onpause

HTMLMediaElement/pause_event

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
pause
onplay

HTMLMediaElement/play_event

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
play
onplaying

HTMLMediaElement/playing_event

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
playing
onprogress

HTMLMediaElement/progress_event

Support in all current engines.

Firefox6+Safari3.1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
progress
onratechange

HTMLMediaElement/ratechange_event

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
ratechange
onresetreset
onsecuritypolicyviolationsecuritypolicyviolation
onseeked

HTMLMediaElement/seeked_event

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
seeked
onseeking

HTMLMediaElement/seeking_event

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
seeking
onselect

HTMLInputElement/select_event

Support in all current engines.

Firefox6+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLTextAreaElement/select_event

Support in all current engines.

Firefox6+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
select
onslotchange

HTMLSlotElement/slotchange_event

Support in all current engines.

Firefox63+Safari10.1+Chrome53+
Opera?Edge79+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
slotchange
onstalled

HTMLMediaElement/stalled_event

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
stalled
onsubmit

HTMLFormElement/submit_event

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera8+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+
submit
onsuspend

HTMLMediaElement/suspend_event

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
suspend
ontimeupdate

HTMLMediaElement/timeupdate_event

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
timeupdate
ontoggletoggle
onvolumechange

HTMLMediaElement/volumechange_event

Support in all current engines.

Firefox6+Safari3.1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+
volumechange
onwaiting

HTMLMediaElement/waiting_event

Support in all current engines.

Firefox6+Safari3.1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+
waiting
onwebkitanimationendwebkitAnimationEnd
onwebkitanimationiterationwebkitAnimationIteration
onwebkitanimationstartwebkitAnimationStart
onwebkittransitionendwebkitTransitionEnd
onwheel

Element/wheel_event

Support in all current engines.

Firefox17+Safari7+Chrome31+
Opera?Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOSNoChrome Android?WebView Android?Samsung Internet?Opera Android?
wheel

以下は、bodyおよびframeset要素以外のすべてのHTML要素イベントハンドラーコンテンツ属性イベントハンドラーIDL属性の両方としてサポートされるイベントハンドラー(およびそれに対応するイベントハンドラーイベント型)である。イベントハンドラーIDL属性として、すべてのDocumentオブジェクトでサポートされる。Windowオブジェクト自身でイベントハンドラーIDL属性として、すべてのWindowオブジェクトでサポートされる。対応するイベントハンドラーコンテンツ属性イベントハンドラーIDL属性が、そのWindowオブジェクトの関連付けられたDocumentが所有するすべてのbodyおよびframeset要素で公開される:

イベントハンドラーイベントハンドラーイベント型
onblur

Element/blur_event

Support in all current engines.

Firefox24+Safari3.1+Chrome1+
Opera11.6+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

Window/blur_event

Support in all current engines.

Firefox6+Safari5.1+Chrome5+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer11
Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+
blur
onerror

Window/error_event

Support in all current engines.

Firefox6+Safari5.1+Chrome10+
Opera?Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android?
error
onfocus

Element/focus_event

Support in all current engines.

Firefox24+Safari3.1+Chrome1+
Opera11.6+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

Window/focus_event

Support in all current engines.

Firefox6+Safari5.1+Chrome5+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer11
Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+
focus
onloadload
onresizeresize
onscroll

Document/scroll_event

Support in all current engines.

Firefox6+Safari2+Chrome1+
Opera11.6+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12+

Element/scroll_event

Support in all current engines.

Firefox6+Safari1.3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
scroll
onscrollendscrollend

この表の最初の列に挙げられるイベントハンドラー名前セットを、 Windowを反映するbody要素のイベントハンドラーセットと呼ぶ。


以下は、Windowオブジェクト自体のイベントハンドラーIDL属性として、Windowオブジェクト自身でサポートされるイベントハンドラー(および対応するイベントハンドラーイベント型)であり、そのWindowオブジェクトの関連付けられたDocumentが所有する対応するイベントハンドラーコンテンツ属性およびイベントハンドラーIDL属性がすべてのbody要素とframeset要素で公開される:

イベントハンドラーイベントハンドラーイベント型
onafterprint

Window/afterprint_event

Support in all current engines.

Firefox6+Safari13+Chrome63+
Opera?Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
afterprint
onbeforeprint

Window/beforeprint_event

Support in all current engines.

Firefox6+Safari13+Chrome63+
Opera?Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
beforeprint
onbeforeunload

Window/beforeunload_event

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera12+Edge79+
Edge (Legacy)12+Internet Explorer4+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12+
beforeunload
onhashchange

Window/hashchange_event

Support in all current engines.

Firefox3.6+Safari5+Chrome8+
Opera10.6+Edge79+
Edge (Legacy)12+Internet Explorer8+
Firefox Android?Safari iOS5+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
hashchange
onlanguagechange

Window/languagechange_event

Support in all current engines.

Firefox32+Safari10.1+Chrome37+
Opera?Edge79+
Edge (Legacy)?Internet ExplorerNo
Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet4.0+Opera Android?
languagechange
onmessage

Window/message_event

Support in all current engines.

Firefox9+Safari4+Chrome60+
Opera?Edge79+
Edge (Legacy)12+Internet Explorer8+
Firefox Android?Safari iOS4+Chrome Android?WebView Android?Samsung Internet?Opera Android47+
message
onmessageerror

HTMLMediaElement/error_event

Support in all current engines.

Firefox6+Safari3.1+Chrome1+
Opera11.6+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12+

Window/messageerror_event

Firefox57+SafariNoChrome60+
Opera?Edge79+
Edge (Legacy)18Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android47+
messageerror
onoffline

Window/offline_event

Support in all current engines.

Firefox9+Safari4+Chrome3+
Opera?Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android?
offline
ononline

Window/online_event

Support in all current engines.

Firefox9+Safari4+Chrome3+
Opera?Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android?
online
onpagehidepagehide
onpageshowpageshow
onpopstate

Window/popstate_event

Support in all current engines.

Firefox4+Safari5+Chrome5+
Opera11.5+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android11.5+
popstate
onrejectionhandled

Window/rejectionhandled_event

Support in all current engines.

Firefox69+Safari11+Chrome49+
Opera?Edge79+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS11.3+Chrome Android?WebView Android?Samsung Internet?Opera Android?
rejectionhandled
onstorage

Window/storage_event

Support in all current engines.

Firefox45+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)15+Internet Explorer9+
Firefox Android?Safari iOS4+Chrome Android?WebView Android37+Samsung Internet?Opera Android?
storage
onunhandledrejection

Window/unhandledrejection_event

Support in all current engines.

Firefox69+Safari11+Chrome49+
Opera?Edge79+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS11.3+Chrome Android?WebView Android?Samsung Internet?Opera Android?
unhandledrejection
onunload

Window/unload_event

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera4+Edge79+
Edge (Legacy)12+Internet Explorer4+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+
unload

以下は、イベントハンドラーコンテンツ属性とイベントハンドラーIDL属性の両方として、すべてのHTML要素でサポートされるイベントハンドラー(および対応するイベントハンドラーイベント型)である。 イベントハンドラーIDL属性として、すべてのDocumentオブジェクトでサポートされる:

イベントハンドラーイベントハンドラーイベント型
oncut

Element/cut_event

Support in all current engines.

Firefox22+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
cut
oncopy

Element/copy_event

Support in all current engines.

Firefox22+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
copy
onpaste

Element/paste_event

Support in all current engines.

Firefox22+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+
paste

以下は、イベントハンドラーIDL属性としてDocumentオブジェクトでサポートされるイベントハンドラー(および対応するイベントハンドラーイベント型)である:

イベントハンドラーイベントハンドラーイベント型
onreadystatechangereadystatechange
onvisibilitychange

Document/visibilitychange_event

Support in all current engines.

Firefox56+Safari14.1+Chrome62+
Opera49+Edge79+
Edge (Legacy)18Internet Explorer🔰 10+
Firefox Android?Safari iOS?Chrome Android?WebView Android62+Samsung Internet?Opera Android46+
visibilitychange

8.2 WindowOrWorkerGlobalScopeミックスイン

WindowOrWorkerGlobalScopeミックスインは、WindowおよびWorkerGlobalScopeオブジェクトで公開されるAPIを使用するためのものである。

他の標準は、適切な参照と一緒に部分的なインターフェイスミックスインWindowOrWorkerGlobalScope { … };を使用して、さらに拡張することを勧める。

self.isSecureContext

このグローバルオブジェクトが安全なコンテキストを表すかどうかを返す。[SECURE-CONTEXTS]

self.origin

文字列としてシリアライズされたグローバルオブジェクトの生成元を返す。

self.crossOriginIsolated

このグローバルで実行しているスクリプトが生成元をまたいだ分離を必要とするAPIを使用できるかどうかを返す。これは、`Cross-Origin-Opener-Policy` および`Cross-Origin-Embedder-Policy` HTTPレスポンスヘッダーおよび"cross-origin-isolated"機能に依存する。

開発者は、location.originよりもself.originを使用することを強く勧める。前者は環境の生成元を、後者は環境のURLを返す。https://stargate.example/文書で次のスクリプトを実行することを想像してみる:

var frame = document.createElement("iframe")
frame.onload = function() {
  var frameWin = frame.contentWindow
  console.log(frameWin.location.origin) // "null"
  console.log(frameWin.origin) // "https://stargate.example"
}
document.body.appendChild(frame)

self.originの方がより信頼性の高いセキュリティ指標となる。

8.3 Base64ユーティリティメソッド

atob()およびbtoa()メソッドは、開発者がbase64エンコーディングとの間でコンテンツを変換することを可能にする。

これらAPIにおいて、簡略のために、"b"は"binary"、"a"は"ASCII"を表すと考えることができる。ただし実際には、主に歴史的な理由で、これらの関数の入力と出力の両方にはUnicode文字列である。

result = self.btoa(data)

入力データを取得し、U+0000からU+00FFまでの範囲で文字のみを含むUnicode文字列の形式で、それぞれ値0x00から0xFFまでを持つバイナリーバイトを表し、そのbase64表現に変換したものを返す。

入力文字列に範囲外の文字が含まれる場合、"InvalidCharacterError" DOMExceptionを投げる。

result = self.atob(data)

入力データを取得し、base64でエンコードされたバイナリーデータを含むUnicode文字列の形式で、これをデコードし、それぞれ0x00から0xFFまでの値を持つバイナリーバイトを表す、そのバイナリーデータに対応した、範囲U+0000からU+00FFまでの文字から成る文字列を返す。

入力文字列が妥当なbase64データではない場合、"InvalidCharacterError" DOMExceptionを投げる。